How to Change TextField Icon Color When Selected In Flutter in 4 ways?

TextField Icon Color to be changed when you select or click a particular text field is something you must have desired while creating forms in flutter.And in some case you want a specific color but flutter shows you a default color which is common.

Well,the TextField widget in Flutter is one of the most used widgets. It is used to take inputs from the user be it email, name, or phone number. But in some cases you might have a prefix or suffix icon in a text field and you would like to change its color when you select or click the text field. So in this tutorial, we’ll see how to Change the TextField Icon Color When Selected In Flutter.

Using PrefixIconColor to Change TextField Icon Color

You can use the PrefixIconColor property inside InputDecoration which helps assign the color to be used.If you don’t assign a color it will show the default material color. Let’s code it out:

TextFormField(decoration: InputDecoration(
              prefixIcon: const Icon(Icons.search,),
              prefixIconColor: Colors.grey,
                ),
          ), 

Here as said before we used the prefixIconColor property inside InputDecoration to change the icon color of the text field. In this way, we can change the color of the prefix or suffix icon even when the user clicks or selects the text field.

Using WidgetStateColor to Change TextField Icon Color

 A widgetState color property represents a color that depends on a widget’s “interactive state”. This state is represented as a Set of WidgetStates, like WidgetState.pressed, WidgetState.focused and WidgetState.hovered.

You can use the resolveWith property of WidgetStateColor to check the current state of the widget and show a color according to the state which for us is the focused state.Here’s the necessary code to achieve this:

Theme(
      data: themeData.copyWith(
          inputDecorationTheme: themeData.inputDecorationTheme.copyWith(
        prefixIconColor:
            WidgetStateColor.resolveWith(
          (Set<WidgetState> states) {
            if (states.contains(WidgetState.focused)) {
              return Colors.blue; // Cor quando focado
            }
            return Colors.grey; // Cor padrão
          },
        ),
      )),
      child: TextField(

        decoration: const InputDecoration(
          prefixIcon: Icon(Icons.person),
        ),
      ),
    ) 

This way you can choose the color you wanna chose when the text field is clicked or selected.

Using FocusNode to Change TextField Icon Color

You can use the theme property to assign it a color when it’s focused and add a focus controller to check whether the text field widget is focused or not according to that you can assign a particular color. Let’s see the code to achieve this functionality.

... 
  FocusNode _fieldNode = FocusNode();
...
TextFormField(
  focusNode:_fieldNode ,
      decoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.green, width: 2.0),
          borderRadius: BorderRadius.circular(10.0),
        ),
        prefixIcon: Icon(Icons.person,
            color: _fieldNode.hasFocus
                ? Theme.of(context).primaryColor
                : Colors.purple)),
       
        hintText: "Name",
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
      ),
    );

First, we define a focus node then we attach it to the TextFormField. Then we use the focus node’s hasFocus property to check whether the text field was focused or not. Then we assigned the color that needed to be shown to the user. This is how we achieve it.

Using Theme Widget to Change TextField Icon Color

You can use the theme widget in flutter and wrap textfield widget inside it and add a colour which you wish to show to the user.Lets see how its coded out.

Theme(
    data:Theme.of(context).copyWith(
        colorScheme: ThemeData().colorScheme.copyWith(
              primary:Colors.red,
        ),
       ),
    child:TextFormField()

In this case, we wrapped the TextformField inside Theme widget and using data property we assigned the colour we wished to show.

There is also another way where we can assign a primary colour at the global theme level which is usually not recommended since why would you change the theme globally for a single widget.But still lets see how its coded out.

ThemeData(
   colorScheme: ThemeData().colorScheme.copyWith(
              primary:Colors.red,
  ),
), 

In this way, it changes color for all the widgets and when they are focused these colors is shown. It’s not the recommended way but it depends on your use case.

Conclusion

In this tutorial, we learned how to change TextField Icon Color when selected In Flutter with practical examples, we first saw how to change the color using InputDecoration property and then explored the way to change color at the app level. Finally, we also learned what are the different ways to change the colors of the icon.

Wanna Level up Your Flutter game? Then check out our ebook The Complete Guide to Flutter Developement where we teach you how to build production grade cross platform apps from scratch.Do check it out to completely Master Flutter framework from basic to advanced level.

Also Read:

How to disable textfield in flutter

Flutter repaint vs rebuild