change text color of Disabled state of ElevatedButton from ElevatedButton.styleFrom()

Question

I want to change my button text color when Button state is in Disabled mood. By using onSurface: MyColors.disable, I can change button background disabled state. But button text not changing. How can I solve this issues. Here is my code, I tried

class MyTheme {
  MyTheme._();

  static final ThemeData lightTheme = ThemeData(
    scaffoldBackgroundColor: ShikhoColors.background,
    primaryColor: ShikhoColors.background,
    backgroundColor: ShikhoColors.background,
    brightness: Brightness.light,
    elevatedButtonTheme: ElevatedButtonThemeData(style: lightElevatedButtonStyle),
    textButtonTheme: TextButtonThemeData(style: _lightTextButtonStyle),
    outlinedButtonTheme: OutlinedButtonThemeData(style: _lightOutlinedButtonStyle),
    cardTheme: _lightCardStyle,
  );

  static final ButtonStyle lightElevatedButtonStyle = ElevatedButton.styleFrom(
    primary: ShikhoColors.blue_main,
    // onSurface: ShikhoColors.disable,
    padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
    elevation: 0.0,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
    textStyle: TextStyle(color: ShikhoColors.background, fontWeight: FontWeight.bold, fontSize: 16.0, fontFamily: 'HindSiliguri'),
  );

  ...
}

Solution

This doesn't work because you set the color to the TextStyle but the color defined by the TextStyle is not used in the button style.

To change the text color, we need to set the foregroundColor property of the ButtonStyle.

see here: elevated_button src

In your case you need to set the onPrimary color property of ElevatedButton.styleFrom method. as mentioned here it is used to create a MaterialStateProperty ButtonStyle.foregroundColor

Comments

[Aminul Haque Aome]

can you tell me please in which place, should I use foregroundColor color?

[Taur]

use onPrimary property to refer to a foreground color