Flutter TextField change Icon color when selected

Question

Goal: Changing the color of the prefixIcon next to the TextField when clicking on the TextField.

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.lock_outline),
    hintText: 'Username'
  )
)

You should post the segment of code that you are working with. — Dan Nagle, Feb 21 '19 at 09:15

score 21 · Answer 1 · answered Feb 21 '19 at 09:36

When Selected the color shown is app primaryColor: of Theme.

One Way of changing is using Theme Widget.

 Theme(
                              child: TextField(
                                decoration: InputDecoration(
                                  prefixIcon: Icon(Icons.email),
                                  labelText: "Email",
                                  hintText: "example@mail.com",
                                ),
                                autofocus: true,
                              ),
                              data: Theme.of(context)
                                  .copyWith(primaryColor: Colors.redAccent,),
                            ),

Other is to change primaryColor at MaterialApp Theme level.

it worked for me, but I used `accentColor:` instead of `primaryColor:`, seems that they changed the source color — Kirill Karmazin, Dec 26 '19 at 15:54

NearHuscarl · Answer 2 · 2021-10-10T08:54:38.230

13

In Flutter 2.5, you can set the active color of the icon in ColorScheme.primary:

theme: ThemeData().copyWith(
  colorScheme: ThemeData().colorScheme.copyWith(
    primary: Colors.green,
  ),
),

Live Demo

edited Oct 10 '21 at 08:54

answered Oct 27 '19 at 08:14

NearHuscarl

66,950
18
261
230

1

Only thing worked for me. THANKS; – MU'men Ahmed Nov 01 '21 at 17:54
Yeah same here. Thanks @NearHuscarl – Charles Arko-Clayman Jun 13 '22 at 11:02

score 10 · Accepted Answer · answered Jun 07 '21 at 07:33

10

As per flutter's update, accentColor property has been deprecated.

https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties

OLD:

theme: ThemeData(
  accentColor: Colors.blue,
),

NEW:

theme: ThemeData(
  colorScheme: ThemeData().colorScheme.copyWith(
    secondary: Colors.blue,
  ),
),

answered Jun 07 '21 at 07:33

Shrijan Regmi

450
5
10

@SalahAdDin Maybe you didn't update to the latest version of flutter. – Shrijan Regmi Jul 17 '21 at 03:14
with the last version the disabled color is based on the `OnSurface` color, which is a different one. – SalahAdDin Jul 17 '21 at 20:06
But this changes icon's color in every state. What if I just want to change color only when input is focused and revert to grey when blurred? – Muhammad Qasim Feb 23 '22 at 09:28
for me primary color worked – zex_rectooor Oct 29 '22 at 12:48

score 6 · Answer 4 · answered Feb 05 '23 at 19:07

If you don't want to change the whole app theme just for 1 behavior of the field, you can use MaterialStateColor class from dart and switch colors based of the state.

Here is an example

InputDecoration(
        prefixIcon: widget.icon,
        prefixIconColor: MaterialStateColor.resolveWith((states) =>
            states.contains(MaterialState.focused)
                ? Colors.black
                : Colors.grey)
  ),

score 3 · Answer 5 · answered Jun 13 '21 at 19:18

3

Convert StatefulWidget in state class create FocusNodes and use TextFormField

 List<FocusNode> _focusNodes = [
  FocusNode(),
  FocusNode(),
];

  @override
  void initState() {
    _focusNodes.forEach((node){
    node.addListener(() {
      setState(() {});
    });
  });
    super.initState();
  }


TextFormField(
            focusNode: _focusNodes[0],
            decoration: InputDecoration(
                prefixIcon: Icon(
                  Icons.alternate_email,
                  color: _focusNodes[0].hasFocus ? Colors.green : Colors.grey,
                ),
                hintText: "Email"),
          ),

answered Jun 13 '21 at 19:18

Çağlar YILMAZ

111
2
4

1

make sure subscribe to focus changes and call setSate there to reflect the state correctly. also dont forget to unsubscribe and dispose... https://stackoverflow.com/a/49344456/6543507 – HoseinGhanbari Aug 26 '21 at 18:46
1

Thank you so much, it solve my problem – Azhar Ali Sep 20 '21 at 11:39

score 3 · Answer 6 · answered Aug 04 '21 at 20:42

I was able to achieve that with

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

inside MaterialApp or you add Theme on your TextFormField

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

score 0 · Answer 7 · answered Oct 07 '19 at 20:16

0

I was able to accomplish this by modifying the accentColor property at the MaterialApp Theme level.

answered Oct 07 '19 at 20:16

Lee Mordell

473
5
16

score 0 · Answer 8 · answered Aug 20 '22 at 23:22

try to add a ColorScheme with fromSeed Color inside your MaterialApp.

Color primaryAccentColor = const Color(0xFF4D70FF);

MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData.light().copyWith(
            colorScheme: ColorScheme.fromSeed(seedColor: primaryAccentColor),
          ),
    ...
);

score 0 · Answer 9 · edited Mar 18 '23 at 10:27

0

Just specify prefixIconColor property in inputDecoration. If it's not specified then it will take MaterialStatProperty by Default.

Here is Example

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

edited Mar 18 '23 at 10:27

AJ-

1,638
1
24
49

answered Mar 11 '23 at 07:18

Hiren

1

Flutter TextField change Icon color when selected

9 Answers9

Live Demo

Linked