(Flutter) TextFormField Change labelColor on Focus

Question

I am trying to change my labelText color when focused. I can change the text color but not when focused.

I have tried all the hint text colors and label text colors, but nothing helps.

Container(
  padding: EdgeInsets.fromLTRB(15, 10, 15, 0),
  child: TextFormField(
    cursorColor: Colors.lightGreen,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      labelText: 'Phone Number',
      hintText: 'Enter a Phone Number',
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.lightGreen
        )
      ),
      border: OutlineInputBorder(
        borderSide: BorderSide()
      ),
    )
  ),
),

Here are images of what is happening:

Are you trying to change the color of the labelText or hintText in general or are you asking to have it be one color when not in focus and another when in focus? — Adrian Murray, Jun 02 '19 at 02:39
I am looking to change the color of the labelText once its in focus. If you see from my pictures, the label text is grey when not selected (which i want) and then when i do select it I want it to go Black(it goes to blue) — Bnd10706, Jun 02 '19 at 02:42

score 74 · Accepted Answer · edited Mar 09 '20 at 12:48

74

You'd need to have a way determine its focus state and then create a conditional for its color based off of that. This is where a focusNode would be helpful. Construct a new FocusNode off the widget creation, use that as the focusNode property in the TextFormField. Then in color property of the TextStyle property of the TextFormField you could add something like:

FocusNode myFocusNode = new FocusNode();

...

  return TextFormField(
    focusNode: myFocusNode,
    decoration: InputDecoration(
      labelText: 'test',
      labelStyle: TextStyle(
        color: myFocusNode.hasFocus ? Colors.blue : Colors.black
      )
    ),
  );

EDIT : Just a quick note, you'll probably need to make sure this is in a StatefulWidget and then add a listener to the focusNode you created and call setState on any events on that focusNode. Otherwise you wont see any changes.

edited Mar 09 '20 at 12:48

Philippe Fanaro

6,148
6
38
76

answered Jun 02 '19 at 02:44

Adrian Murray

2,170
1
13
15

this did not work. I added a focus node like you said and followed your example. The labelStyle remained the same color weather in focus or not. – Bnd10706 Jun 02 '19 at 02:51
humm.. are you saying call set set on the labelText? – Bnd10706 Jun 02 '19 at 02:56
8

You don't setState on a property, you call it on an event which that calls a rebuild of the entire widget/class. You're calling setState on the focus event. This would be done by adding a listener in the initState for example. Like : myFocusNode.addListener((){ setState((){}); }) don't forget to dispose of your listeners to prevent memory leaks. – Adrian Murray Jun 02 '19 at 02:59
perfect, that did it. Thank you! – Bnd10706 Jun 02 '19 at 03:08
This is my first time using a listener (sorry im a beginner, where do I dispose of the listener at? – Bnd10706 Jun 02 '19 at 03:13
you override the dispose() method just like you do the initState(). You would need to make the (){} function it's own variable and then call it in both the addListener and removeListener methods of the focusNode you created. This is likely something best read up on in depth rather than my quick explanation. – Adrian Murray Jun 02 '19 at 03:15
I will, I appreciate it! – Bnd10706 Jun 02 '19 at 03:18
Ok, i found an issue.... I have 6 different forms, and when i add the focus node to the forms, they call go into focus. I dont need to do 6 different focusnodes do it? – Bnd10706 Jun 02 '19 at 03:21
1

yes, each focus node is meant for each field. That's how you determine where you have focus or where to set focus if you wish to move the user's focus programmatically. An option you may want to consider is to make your own class that wraps all of this color-change-on-focus/unfocus functionality into one place. Then use that class as your way to make text fields. This would actually be a bit more efficient since then you'd only call a rebuild of each textfield on focus change events instead of the whole form/page. – Adrian Murray Jun 02 '19 at 03:31
This method is working for changing the color of the text field when focused, but the color does not revert to the original one when blurred. Any ideas? Thanks! – rob_ Jun 08 '20 at 09:17
Use the theme, you only have to do it once for all input fields. floatingLabelStyle: TextStyle(color: Colors.blue), – wamae Sep 17 '21 at 06:51
This is a good start, although I think a theme-based solution is more sustainable e.g. keeps your code DRY. e.g. inputDecorationTheme: InputDecorationTheme( floatingLabelStyle: TextStyle(color: Colors.blue), ), – wamae Oct 04 '21 at 10:29
if you don't want to use focus nodes you can achieve the same effect by setting the primarySwatch:Colors.blue in ThemeData – mister_cool_beans May 02 '22 at 09:05

wamae · Answer 2 · 2023-07-31T10:44:29.260

32

Use themes, this would only have to be done once in a central place:

inputDecorationTheme: InputDecorationTheme(
      floatingLabelStyle: TextStyle(color: Colors.blue),
),

edited Jul 31 '23 at 10:44

answered Sep 17 '21 at 06:53

wamae

660
9
21

1

The OP asked to change labelText color when focused. This code does not change labelText color when focused – mister_cool_beans May 02 '22 at 08:42
It was so simple all along and I was wasting my time on StatefulWidget? – DNA.h May 09 '22 at 14:27
1

@mister_cool_beans no the OP asked exactly this. – Chrissi May 26 '22 at 22:55
It is the best solution. – Ehsan Kalali Apr 30 '23 at 11:37

Philippe Fanaro · Answer 3 · 2021-07-13T22:09:58.590

The Summary

You might want to check out Flutter Cookbook's Focus and text fields recipe.

Essentially, we have to:

Create a FocusNode property.
Add initialization and disposal to it.
Add it to the TextFormField.
Add a focus request on every tap on the TextFormField.

1. Create a `FocusNode` property

class CustomTextFormFieldState extends State<CustomTextFormField> {
  FocusNode _focusNode;
  ...

2. Add initialization and disposal to it

@override
void initState() {
  super.initState();
  _focusNode = FocusNode();
}

@override
void dispose() {
  _focusNode.dispose();
  super.dispose();
}

3. Add it to the `TextFormField`

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    ...

4. Add a focus request on every tap on the `TextFormField`

Don't forget to use setState:

void _requestFocus(){
  setState(() {
    FocusScope.of(context).requestFocus(_focusNode);
  });
}

Add the method to the TextFormField's onTap property:

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    onTap: _requestFocus,
    ...

score 19 · Answer 4 · answered Mar 01 '22 at 15:34

19

https://api.flutter.dev/flutter/material/InputDecoration/labelStyle.html

labelStyle: MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
          final Color color = states.contains(MaterialState.focused)
              ? Colors.pink
              : Colors.orange;
          return TextStyle(color: color);
        }),

answered Mar 01 '22 at 15:34

agent linlux

191
1
4

4

That's the right, and definitely the most correct answer. – Rajju Nov 07 '22 at 18:10
2

This shouldn't be so low. – Robin Dijkhof Nov 21 '22 at 20:46
The only real answer. – Nightking Apr 27 '23 at 10:22
Focused label stays the default grey - this is for the TextField with the OutlineInputBorder. – JJ Du Plessis Aug 29 '23 at 12:30

score 12 · Answer 5 · answered Apr 20 '20 at 04:29

12

A quick solution is changing the primarySwatch from the theme of the Widget MaterialApp. The only disadvantage is that a Material Color is required.

answered Apr 20 '20 at 04:29

Classy-Bear

881
11
19

score 10 · Answer 6 · answered Feb 25 '21 at 18:39

I solve this problem with a Focus widget. First I defined a Color-Variable for each Field:

final _lowColor = Colors.amber[50];   // use your own colors
final _highColor = Colors.amber[200];

Color _field1Color = _lowColor;
Color _field2Color = _lowColor;
...

Then I wrapped each TextFormField with a Focus Widget and change the fieldColor:

child: Focus(
  onFocusChange: (hasFocus) {
    setState(() => _field1Color = hasFocus ? _highColor : _lowColor);
  },
  child: TextFormField(
    ...
      color: _field1Color,
    ...
    ),
  ), 
),

Worked Perfectly for me! – Ankit Chawla May 19 '21 at 07:21 — Ankit Chawla, May 19 '21 at 07:21

score 9 · Answer 7 · answered Jun 15 '22 at 21:02

for active/click

floatingLabelStyle: TextStyle(color: Colors.yellow),

for inactive

labelStyle: TextStyle(color: Colors.black),

below is complete example

TextField(
         decoration: InputDecoration(
            hintText: 'Verify Password',
            focusColor: appColor,
            labelText: "Verify Password",
            labelStyle: TextStyle(color: Colors.black),
            floatingLabelStyle: TextStyle(color: appColor),
            floatingLabelBehavior: FloatingLabelBehavior.always
         ),
         cursorColor: appColor,
)

score 8 · Answer 8 · answered Oct 27 '20 at 11:07

8

Here is a quick method without using stateful widget

 return Theme( // 1) wrap with theme widget
   data: Theme.of(context).copyWith(primaryColor: //2) color you want here)
   child: TextFormField(
     focusNode: myFocusNode,
     decoration: InputDecoration(
    labelText: 'test',      
    ),
   ),
  );

answered Oct 27 '20 at 11:07

David Machara

559
9
13

The Text of the unfocused label is "hintColor: ". But it doesn't work, if you use a TextStyle color property in the hintText property of the InputDecoration. I can't tell why not... – th_lo Mar 18 '21 at 11:21
1

This is hands down the easier way to make it work. Thanks. – DavidMM Jun 04 '21 at 16:26
I'm assuming that this needs to apply through the application. Would it be better to do the above or do it at a theme level? – wamae May 30 '22 at 13:14

score 4 · Answer 9 · edited Jul 13 '21 at 14:50

Update

As mentioned by Guilherme in the comment, the later version of Flutter uses different logic to get the color

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    return themeData.colorScheme.primary;
  }
  return themeData.hintColor;
}

Source

You will now need to set it from the colorScheme instead

ThemeData.dark().copyWith(
  colorScheme: ColorScheme.dark(
    primary: activeColor,
  ),
)

Original answer

After digging the source code for the InputDecorator used to determine the label color, here's what I found.

TextStyle _getFloatingLabelStyle(ThemeData themeData) {
  final Color color = decoration.errorText != null
    ? decoration.errorStyle?.color ?? themeData.errorColor
    : _getActiveColor(themeData);
  final TextStyle style = themeData.textTheme.subtitle1.merge(widget.baseStyle);
  return style
    .copyWith(color: decoration.enabled ? color : themeData.disabledColor)
    .merge(decoration.labelStyle);
}

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    switch (themeData.brightness) {
      case Brightness.dark:
        return themeData.accentColor;
      case Brightness.light:
        return themeData.primaryColor;
    }
  }
  return themeData.hintColor;
}

In short, to change the label color, set the primaryColor light theme or accentColor for dark theme.

Another tip: To change the label color while it's not focused, set hintColor.

ThemeData.dark().copyWith(
  primaryColor: Colors.red,
  accentColor: Colors.white,
  hintColor: Colors.pink,
)

It seems things have changed in the latest flutter version. Now instead of using "primaryColor" and "accentColor" we need to change "colorScheme": ``ThemeData.dark().copyWith(colorScheme: ColorScheme.dark(primary: activeColor),"`` https://github.com/flutter/flutter/blob/b22742018b3edf16c6cadd7b76d9db5e7f9064b5/packages/flutter/lib/src/material/input_decorator.dart#L2030 — Gui Silva, May 20 '21 at 18:54

score 3 · Answer 10 · answered Mar 21 '22 at 11:48

One more clean way to do it with styles (you can add styles to the main theme and use for dark \ light modes)

TextFormField(
  decoration: InputDecoration(
    labelText: "some label",
    labelStyle: const TextStyle(color: Colors.grey),
    floatingLabelStyle: const TextStyle(color: Colors.blueAccent),
  ),),

score 1 · Answer 11 · answered Aug 05 '20 at 10:55

you can also use labelStyle when the text field is in focus and if the text field is erroneous (caused by not following the validation)

labelText: 'Password',
     labelStyle: TextStyle(
        color: Colors.black54,
          ),
//when error has occured
     errorStyle: TextStyle(
       color: Colors.black,
         ),

Gleny · Answer 12 · 2021-05-02T02:57:11.087

I solved the problem using a StatefulWidget and Focus widget. I use StatefulWidget because you need to use setState to notify the color change when focus on input

class InputEmail extends StatefulWidget {
  @override
  _InputEmailState createState() => _InputEmailState();
}

class _InputEmailState extends State<InputEmail> {
  Color _colorText = Colors.black54;

  @override
  Widget build(BuildContext context) {
    const _defaultColor = Colors.black54;
    const _focusColor = Colors.purple;

    return Container(
      padding: EdgeInsets.symmetric(vertical: 15),
      child: Focus(
        onFocusChange: (hasFocus) {
          // When you focus on input email, you need to notify the color change into the widget.
          setState(() => _colorText = hasFocus ? _focusColor : _defaultColor);
        },
        child: TextField(
          // Validate input Email
          keyboardType: TextInputType.emailAddress,
          
          decoration: InputDecoration(
            hintText: 'example@domain.com',
            labelText: 'Email',
            labelStyle: TextStyle(color: _colorText),
            
            // Default Color underline
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.black26),
            ),

            // Focus Color underline
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.purple),
            ),
            icon: Icon(
              Icons.mail,
              color: Colors.deepPurpleAccent,
            ),
          ),
        ),
      ),
    );
  }
}

score 0 · Answer 13 · answered Mar 14 '21 at 14:51

If You want to change the primary color. Just simply define add the primaryColor of the Widget MaterialApp

const appPrimaryColor = Color(0xFF746DF7);

ThemeData theme() {
  return ThemeData(
    scaffoldBackgroundColor: Colors.white,
    fontFamily: "Inter",
    appBarTheme: appBarTheme(),
    textTheme: textTheme(),
    inputDecorationTheme: inputDecorationTheme(),
    visualDensity: VisualDensity.adaptivePlatformDensity,
    primaryColor: appPrimaryColor // <------ HERE
  );
}

MaterialApp(
   title: 'Flutter Demo',
   theme: theme(), // <------ HERE
   home: SplashScreen(),
   routes: routes,
)

score 0 · Answer 14 · answered Jul 02 '23 at 21:48

The Material 3 way using ColorScheme for text color and InputDecorationTheme for border color:

var focusColor = Colors.blue;
var nonFocusColor = Colors.grey;

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      primary: focusColor,
      onSurfaceVariant: nonFocusColor,
      // other required props ...
    ),
    inputDecorationTheme: const InputDecorationTheme(
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: focusColor),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: nonFocusColor),
      ),
    ),
    useMaterial3: true,
  ),
);

score -1 · Answer 15 · answered Sep 02 '20 at 20:38

-1

You can wrap the textfield with Theme and set the primary color to whatever you want the label color to be

answered Sep 02 '20 at 20:38

Munashif Muhsin

7
1

Simple and working. Thank you and have a nice day! – F-Y Jun 28 '21 at 08:39

score -1 · Answer 16 · edited Nov 16 '20 at 05:07

-1

There is a 'lableStyle' in 'decoration', just like:

labelText: 'Description',
labelStyle: TextStyle(
  color: Colors.lightBlueAccent,
)),

edited Nov 16 '20 at 05:07

Dharman

30,962
25
85
135

answered Nov 16 '20 at 05:01

Javen

7
2

It's the primary setting. This also affects when textFormField is not on focus – Md. Hasan Mahmud Jul 31 '21 at 13:35

score -1 · Answer 17 · edited Feb 27 '22 at 21:39

-1

There is a floatingLabelStyle parameter in the InputDecoration, you can use it like this:

decoration: InputDecoration(
    labelText: "label",
    hintText: "hint",
    labelStyle: GoogleFonts.roboto(
      color: color.labelColor,
    ),
    floatingLabelStyle: GoogleFonts.roboto(
      color: color.defaultGreen,
    ),),

edited Feb 27 '22 at 21:39

E_net4

27,810
13
101
139

answered Feb 23 '22 at 06:19

Hassan Ansari

318
1
3
11

(Flutter) TextFormField Change labelColor on Focus

17 Answers17

The Summary

1. Create a `FocusNode` property

2. Add initialization and disposal to it

3. Add it to the `TextFormField`

4. Add a focus request on every tap on the `TextFormField`

Update

Original answer

Linked

(Flutter) TextFormField Change labelColor on Focus

17 Answers17

The Summary

1. Create a FocusNode property

2. Add initialization and disposal to it

3. Add it to the TextFormField

4. Add a focus request on every tap on the TextFormField

Update

Original answer

Linked

1. Create a `FocusNode` property

3. Add it to the `TextFormField`

4. Add a focus request on every tap on the `TextFormField`