Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to set a theme for the input decoration prefix icon?

Tags:

flutter

dart

I have an input field which has a prefix Icon, but I can't seem to figure out how to set the theme for when the field is not selected. This is what it looks like when not selected

enter image description here

As you can see the icon has a dark color while it should have the light color that the border has. When I select the field I get this

enter image description here

Which is much better because now I can actually see the icon. The documentation says

The size and color of the prefix icon is configured automatically using an [IconTheme] and therefore does not need to be explicitly given in the icon widget.

But when I set the icon themes

iconTheme: IconThemeData(color: _primaryColorLight),
primaryIconTheme: IconThemeData(color: _primaryColorLight),
accentIconTheme: IconThemeData(color: _primaryColorLight),

Nothing changes?

  Widget _buildNameField(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return TextFormField(
      onSaved: (String value) => _phoneNumber = value,
      keyboardType: TextInputType.text,
      style: theme.textTheme.body1,
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.person),
        hintText: 'Name',
      ),
      validator: (String value) {
        if (value.isEmpty || value.length < 2) return 'Please enter a name with two letters or more';
      },
    );
  }

That's my name field. Now I could ofcourse just give the icon a color. But I so happen to be using a package which has a selection menu which also uses a TextFormField and also faces the same problem. So I could ofcourse fork that repo and change the icon color in there aswell. But that seems way to much effort and pretty hacky.

So how can I set it with a theme?

Edit

The documentation says that the TextFormField's prefix icon theme comes from a IconTheme.

return IconTheme(
  data: theme.iconTheme,
  child: ListTileTheme(
    iconColor: theme.iconTheme.color,
    child: MaterialApp(
      home: TheRootPage(),
      theme: theme,
      debugShowCheckedModeBanner: false,
    ),
  ),
);

This works for the ListTileTheme but not for the IconTheme why is this?

like image 408
anonymous-dev Avatar asked May 05 '20 11:05

anonymous-dev


1 Answers

The answer is to add this to your theme data brightness: Brightness.dark, and brightness: Brightness.light, depending on your background color.

like image 184
anonymous-dev Avatar answered Oct 01 '22 11:10

anonymous-dev