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
),

Vong Panha Huot · Answer 1 · 2020-06-15T06:01:19.487

15

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'),
  );
}

edited Jun 15 '20 at 06:01

answered Jun 15 '20 at 05:30

Vong Panha Huot

655
7
14

1

This only works if there is no labelColor configured. – kuhnroyal Jul 09 '20 at 17:05
ITS WORKED FOR ME – core114 Jun 22 '21 at 05:07

score 8 · Answer 2 · edited Aug 19 '20 at 15:05

8

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,
            ),
        ),
)

edited Aug 19 '20 at 15:05

Daniel Gomez Rico

15,026
20
92
162

answered Jul 15 '19 at 07:35

Rubens Melo

3,111
15
23

10

This doesn't answer the question. I want to change only the disabled text field's label, this changes all. – Vince Varga Jul 15 '19 at 09:58
2

Create a custom theme for enable and other disable theme e change it vis setState() whenever you need. @VinceVarga – Rubens Melo Jul 15 '19 at 13:47
Well, thank you, though this is kind of the same approach I added in the question as a workaround. – Vince Varga Dec 05 '19 at 08:03

score 2 · Answer 3 · edited Oct 14 '22 at 18:41

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,
      );
    }
  },
),

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

3 Answers3

Linked