How can I theme the color the disabled text form field's label in Flutter?

Question

I want to apply a theme in my Flutter app on the disabled text fields' label because the grey color I have right now is quite hard to read.

I'd like to apply it to my entire app, so I'd like to use theming, however, I didn't find any solution that would enable my to customize the label's text style only if the text form field is disabled

How can I theme and set globally the color the disabled text form field's label in Flutter?

I know how to change the label's text style conditionally, however, I need to remember to always use the same style (or I could wrap the widget, but that sounds also suboptimal). I can customize the label's color via the decoration named parameter, like so:

TextFormField(
  enabled: isEnabled,
  decoration: InputDecoration(
    labelText: 'Value',
    labelStyle: TextStyle(color: isEnabled ? Colors.green : Colors.red),
  ),
  // .... other fields, like controller might come here
),

Recitativo

Answer 1

You could use Theme to wrap around your widget set the property disabledColor.

Example: Demo

final customText = Theme(
  data: ThemeData(
    disabledColor: Colors.blue,
  ),
  child: TextFormField(
    enabled: false,
    decoration: const InputDecoration(
        icon: Icon(Icons.person),
        hintText: 'What do people call you?',
        labelText: 'Name *',
    ),
  ),
);

or Globally

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      disabledColor: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

Hayseed

This only works if there is no labelColor configured. – Typebar

Doesn't work in Flutter 3.13.9 – Hydrangea

Answer 2

You can use a InputDecorationTheme .

MaterialApp has a property theme where you can set a custom ThemeData.

ThemeData has a property inputDecorationThemewhere you can set a InputDecorationTheme .

And InputDecorationTheme has a lot of properties that you can use to customize your text fields.

 MaterialApp(
        theme: ThemeData(
          inputDecorationTheme: InputDecorationTheme(
            border: OutlineInputBorder(),
            contentPadding: EdgeInsets.symmetric(
              vertical: 22,
              horizontal: 26,
            ),
            labelStyle: TextStyle(
              fontSize: 35,
              decorationColor: Colors.red,
            ),
        ),
)
          

Gleanings

This doesn't answer the question. I want to change only the disabled text field's label, this changes all. – Recitativo

Create a custom theme for enable and other disable theme e change it vis setState() whenever you need. @VinceVarga – Gleanings

Well, thank you, though this is kind of the same approach I added in the question as a workaround. – Recitativo

Doesn't work in Flutter 3.13.9 – Hydrangea

Answer 3

To define another label color for disabled fields in InputDecoration, you can use MaterialStateTextStyle.resolveWith

labelStyle: MaterialStateTextStyle.resolveWith(
  (Set<MaterialState> states) {
    if (states.contains(MaterialState.disabled)) {
      return const TextStyle(
        color: Colors.grey,
      );
    } else {
      return TextStyle(
        color: Colors.blue,
      );
    }
  },
),

Pandemic

This was the only solution proposed which works without wrapping the TextField with a Theme. Thanks for that. – Blakeney

Doesn't work when using initialValue on TextFormField in Flutter 3.13.9. – Hydrangea

Doesn't work when the enabled of TextInputField is true – Gadwall

Answer 4

This is what worked for me:

style: bodyText().copyWith(color: Colors.black), //bodyText() is defined somewhere else in my case

It forces the text color to be black regardless of whether the TextFormField is enabled or disabled

Burnet