How to set style for a text field label when the input is active?

Question

On the image below the Demo Text label by default a little bit small. I tried to change labelSmall and labelMedium styles but it doesn't work for that. What style is responsible for that?

Answer 1

You can use floatingLabelStyle in InputDecoration of the TextField

Example:

    TextField(
      decoration: InputDecoration(
        floatingLabelStyle: TextStyle(
          color: Colors.red,
          fontSize: 12
        ),
        labelText: 'Demo Text',
        labelStyle: TextStyle(
          fontSize: 16
        )
      ),
    ),

Answer 2

You can set the style using the parameter floatingLabelStyle in decoration:. See the example below:

TextField(
    decoration: InputDecoration(
        labelText: 'Enter your username',
        floatingLabelStyle: TextStyle(fontSize: 1)
    ),
)

Take a look at the Flutter docs about TextField widget here: https://docs.flutter.dev/cookbook/forms/text-input

Answer 3

You can try this code:

var textStyle = const TextStyle(
                        fontSize: 40.0,
                        color: Colors.green,);
                
///
StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
              return TextField(
                onChanged: (value) {
                  if (value.isEmpty) {
                    setState(() {
                      textStyle = const TextStyle(
                        fontSize: 40.0,
                        color: Colors.green,
                      );
                    });
                  } else {
                    setState(() {
                      textStyle = const TextStyle(
                        fontSize: 16.0,
                        color: Colors.red,
                      );
                    });
                  }
                },
                decoration: InputDecoration(
                  labelStyle: textStyle,
                    floatingLabelStyle: const TextStyle(
                    fontSize: 16.0,
                    color: Colors.red,
                  ),
                  label: Text('Demo Text'),
         
                ),
              );
            },
          )

Here is the screenshot of when the TextField is Empty:

Here is the screenshot of when the TextField is NotEmpty or is active:

And when you make the TextField Empty it changes to your Empty style.

happy coding...