Question 74842 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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?

enter image description here

Tags:

3

Answers


  1. 0

    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
        )
      ),
    ),
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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:

    enter image description here

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

    enter image description here

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

    happy coding…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search