How to customize the TextFormField label animation? How to customize the TextFormField label animation? dart dart

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),                ))));  }}

demo

Hope this helps.