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