change the color of unfocused text field icon

[Saifallak]

Use case

Theming TextField unfouced icon color through themeData.

Proposal

i'm trying to use ThemeData to change the app colors at any moment, also it's easier to manage app when it's colors are contained in one single file like CSS does

what flutter can do? make the icon take the color of unselectedWidgetColor of themeData , i think it's the corrected color instead of hard Coded grey color

for more info about this request, you can check this stackoverflow as i though it's already implemented but it wasn't , they told me some workarounds , but i think it's easy to be implemented isn't it ?

[Saifallak]

@HansMuller already asked on StackOverFlow but i think it should be implemented in Flutter in ThemeData like other widgets

[monisnap-julien]

Any update on this topic ? Still very hard to modify Textfield style...

[nxcco]

Any news on this?

[edex96]

Its hard coded
you can't use theme to override this color
but you can manage the icon's color state yourself
its not elegant but hey we developers are bombarded with so many obstacles everyday this should not upset us right.. right..
crying intensifies..

flutter/packages/flutter/lib/src/material/input_decorator.dart

Color _getDefaultIconColor(ThemeData themeData) {
    if (!decoration!.enabled && !isFocused)
      return themeData.disabledColor;

    switch (themeData.brightness) {
      case Brightness.dark:
        return Colors.white70;
      case Brightness.light:
        return Colors.black45;
    }
  }

[JamesMcIntosh]

I can see two sensible expected behaviors:

• Icon color is the same whether focused or not
• Icon color is different when not focused

Material design doesn't have any clear specification about icon colors in text fields.
https://material.io/components/text-fields

If it's sensible to use the existing theme then hintColor or themeData.colorScheme.primary are good candidates (suggestions welcome).

My suggestion would be to replace:

final Color iconColor = isFocused ? activeColor : _getDefaultIconColor(themeData);

Color _getDefaultIconColor(ThemeData themeData) {
...
}

With:

final Color iconColor = _getIconColor(themeData);

Color _getIconColor(ThemeData themeData) {
  if (!decoration!.enabled && !isFocused) {
    return themeData.disabledColor;
  }

  if (isFocused) {
    return themeData.colorScheme.primary;
  }

  return themeData.hintColor;
}

The only problem with reusing the theme as suggested is when your desired colour is different from the hintColor, you will still not be able to specify it.

[kamrancr7]

Any update on this??

[flutter-triage-bot]

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

[HansMuller]

This request has been resolved. See the last two examples on https://api.flutter.dev/flutter/material/InputDecoration-class.html

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.