How to change disabled color of ElevatedButton and OutlinedButton

Question

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
}

Answer 1

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