Material Button disabledColor not showing entered color in Flutter

5
votes

I'm trying to display different color when Material button is disabled. I'm adding property disabledColor and disabledTextColor. However, disabledTextColor showing exact color entered but disabledColor not showing any color.

Here is my code

disabledColor:Colors.grey, //not working for background color of button disabledTextColor:Colors.black, // working for text color of button

MaterialButton(
  padding: EdgeInsets.all(10.0),
  disabledElevation: 1,
  disabledColor: Colors.black45,
  disabledTextColor: Colors.white70,
  color:Colors.indigo,
  textColor: Colors.white,
  child: Text("Verify",style: TextStyle(
    fontSize: 18.0,
  ),),
  onPressed: null,
),

I expect the output should display grey as background color and black as text color.

2
flutter

2 Answers

9
votes

Looks like there is a bug on MaterialButton widget, the disabledColor variable is not being used, try using RawMaterialButton.

bool enabled = false;
...
   

RawMaterialButton(
  padding: EdgeInsets.all(10.0),
  disabledElevation: 1,
  fillColor: enabled ? Colors.indigo : Colors.black45,
  textStyle: TextStyle(color: enabled ? Colors.white : Colors.white70),
    child: Text(
      "Verify",
      style: TextStyle(
        fontSize: 18.0,
      ),
    ),
  onPressed: enabled ? () {} : null,
),
0
votes

Use this scheme

inputDecorationTheme: InputDecorationTheme(
        iconColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
          if (states.contains(MaterialState.focused)) {
            return Colors.green;
          }
          if (states.contains(MaterialState.error)) {
            return Colors.red;
          }
          return Colors.green;
        }
        ),
      )