How to customize the TextFormField label animation?

Question

How one can customize the TextFormField label animation? The InputDecoration doesn’t provide a way to set a fixed font size or any kind of different animation.

I would like to animate only from the hint location to the label without scaling down the font. Also, if I override the font color property it won’t change when the field is on focus, although this can be easily handled with a FocusNode listener.

Anyway, does anyone know an easy way to provide my own custom animation or at least, tweak it a bit, without having to recreate a custom form field all from scratch?

Thank you.

Answer 1

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.