Flutter TextFormField Prefix Icon Focus Color on Theme Change

Question

I have a TextFormField, which contains a prefix Icon that I would like to turn red when it is focused on.

To achieve that, I have wrapped the TextFormField with a Theme object (Relevant SO Question):

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

This works great, but the problem arises when I switch to Dark mode inside my application. Because I am using this setting (I am assuming), it turns the entire TextFormField to use the primary color which is black and then the entire TextFormField is black.

Other TextFormField elements which I have not wrapped with a Theme object, are styled correctly according to theme.

How would I go about fixing this?

What I would like to achieve is have the TextFormField appear like the others in Dark mode and be highlighted red when it is focused on, regardless of light or dark mode.

Would I need to define a custom application theme for this?

powerman23rus · Answer 1 · 2022-11-28T15:37:14.740

0

Tru to inherit from current theme by using copyWith method:

Theme(
    data: Theme.of(context).copyWith(
      primaryColor: Colors.red
    ),
      child: TextFormField(),
  )

UPDATE

Or alternatively, you can try using darkTheme property of the MaterialApp widget:

MaterialApp(
  darkTheme: Theme.of(context).copyWith(...),
  home: ...
)

edited Nov 28 '22 at 15:37

answered Nov 18 '22 at 07:34

powerman23rus

1,297
1
9
17

I already have copyWith in the code snippet I shared in my question. How is this different? – tomerpacific Nov 18 '22 at 11:34
It also does not work. – tomerpacific Nov 20 '22 at 15:30
did you try to specify darkTheme property? – powerman23rus Nov 21 '22 at 15:58
Please edit your answer to explain what you mean. – tomerpacific Nov 28 '22 at 02:23

Flutter TextFormField Prefix Icon Focus Color on Theme Change

1 Answers1