Search code examples
flutterbuttonmaterial-designthemes

Can't override the disabled Button Color

I'm feeling stupid: I can't override the color of a Button when it is disabled.

The code looks good, and I can ensure that the logic of _isDisabled is correct.

The button:

ElevatedButton(
   onPressed: _isDisabled
      ? null
      : () {
        //something really fancy
           },
   style: 
     ElevatedButton.styleFrom(
       backgroundColor: _isDisabled 
         ? Colors.amber
         : MyTheme.getCiSonoButtonColor(context: context),
       padding: const EdgeInsets.symmetric(
          horizontal: 50, vertical: 16
       ),
       shape: RoundedRectangleBorder( 
          borderRadius: BorderRadius.circular(30),
       ),
      ),
      child: Text('Button'),

As you can see I'm trying to set the color of the button (when disabled) to Amber, but the result is a light Grey. I really don't know why. It seems like there is a predefined color for the disabled mode.

How to fix this annoying problem?

For clearness I attach a screenshot of the app (look at the Grey button):

enter image description here

NB: when the logic turn the _isDisabled variable to false, the button looks as I want. The problem is when disabled.

(I've already tried to set the property disabledColor of ThemeData and nothing changed)

Solution

  • You can directly provide disabledBackgroundColor on styleFrom and set null on onPressed

    ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.grey,
    disabledBackgroundColor: Colors.amber,
  ),
  onPressed: _isDisabled ? null : () {},
  child: Text("Button"),
)