Created
April 16, 2018 01:15
-
-
Save branflake2267/faa33720716f649d5212474c8d0bc590 to your computer and use it in GitHub Desktop.
Flutter - Flutter - Auto Scaling the Text Size
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(new MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return new MaterialApp( | |
title: 'Flutter Demo', | |
theme: new ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: new MyHomePage(), | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
@override | |
_MyHomePageState createState() => new _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
double _initHeight; | |
double _height; | |
@override | |
void initState() { | |
_initHeight = 20.0; | |
_height = _initHeight; | |
super.initState(); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return new GestureDetector( | |
onScaleUpdate: (ScaleUpdateDetails details) { | |
setState(() { | |
_height = _initHeight + (_initHeight * (details.scale * .35)); | |
print("scale=${details.scale} height=$_height ih=$_initHeight"); | |
}); | |
}, | |
onScaleEnd: (ScaleEndDetails details) { | |
setState(() { | |
_initHeight = _height; | |
}); | |
}, | |
child: new Scaffold( | |
appBar: new AppBar( | |
title: new Text("Home"), | |
), | |
body: new Center( | |
child: new SizedBox( | |
height: _height, | |
child: new FittedBox( | |
child: new Text("Howdy"), | |
), | |
), | |
), | |
), | |
); | |
} | |
} |
The challenge: Figure out how to solve the text from jumping on the second scaling.
@branflake2267 Here's a few variants on a fixed version. https://gist.github.com/slightfoot/b45916c32889e10ca3f6014562d5c27b
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://youtu.be/85p0fC-Yk2Y - The youtube video covering this code.