Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
),
like image 649
Vince Varga Avatar asked Jul 15 '19 07:07

Vince Varga


2 Answers

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,
            ),
        ),
)
          
like image 165
Rubens Melo Avatar answered Sep 21 '22 05:09

Rubens Melo


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'),
  );
}
like image 33
Vong Panha Huot Avatar answered Sep 25 '22 05:09

Vong Panha Huot