How to change disabled color of ElevatedButton and OutlinedButton

user_12483095 0
Viewed 2872

There's no such property in ElevatedButton and OutlinedButton widget to change the disabled color like a regular RaisedButton.

ElevatedButton(
  onPressed: null,
  disabledColor: Colors.brown, // Error
}
flutter
2 Answers

Use onSurface property if you only want to change the disabled color (this property is also available in OutlinedButton).

ElevatedButton(
  onPressed: null,
  style: ElevatedButton.styleFrom(
    onSurface: Colors.brown,
  ),
  child: Text('ElevatedButton'),
)

For more customizations, use ButtonStyle:

ElevatedButton(
  onPressed: null,
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>((states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.brown; // Disabled color
      }
      return Colors.blue; // Regular color
    }),
  ),
  child: Text('ElevatedButton'),
)

To apply it for all the ElevatedButton in your app:

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        onSurface: Colors.brown
      ),
    ),
  ),
)
user_124830950

In situation where you want to set an elevated button theme within your app, you can use this:

ThemeData(
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      onSurface: Colors.brown
  ),
  child: Text('ElevatedButton')
))
user_43446150
Related