How to customize the TextFormField label animation?
Actually, you can use FocusNode
state to customize floating label font size as well as floating label text color. Depending on the focus state, floating label font size can be forced to look like it's maintaining the same size as hint. Here is a quick example demonstrating this,
class MyApp extends StatefulWidget { @override MyAppState createState() => MyAppState();}class MyAppState extends State<MyApp> { FocusNode myFocusNode = new FocusNode(); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Test'), ), body: Container( padding: const EdgeInsets.all(20.0), child: TextFormField( focusNode: myFocusNode, decoration: new InputDecoration( alignLabelWithHint: true, labelStyle: TextStyle( fontSize: myFocusNode.hasFocus ? 24 : 18.0,//I believe the size difference here is 6.0 to account padding color: myFocusNode.hasFocus ? Colors.blue : Colors.grey), labelText: 'Hint text', filled: true, fillColor: Colors.white, enabledBorder: new OutlineInputBorder( borderRadius: new BorderRadius.circular(25.0), borderSide: new BorderSide( color: Colors.grey, ), ), focusedBorder: new OutlineInputBorder( borderRadius: new BorderRadius.circular(25.0), borderSide: new BorderSide( color: Colors.blue, ))), style: new TextStyle(color: Colors.black), )))); }}
Hope this helps.