change to MaterialButton's colour using ThemeData

Question

I have a custom button in my app and can manipulate that using ThemeData from inside of GetMaterialApp but I cannot change its colour. I have to change its colour in here because my app has several themes are able to switch.

My custom button is:

MaterialButton(
      onPressed: () {
        ...
      },
      child: Icon(
        icon,
        color: Get.theme.iconTheme.color,
      ),
    );

and ThemeData is:

ThemeData customThemeDataLight = ThemeData(
  ...
  buttonTheme: const ButtonThemeData(
    height: 60,
    buttonColor: cpDarkBlue,
    shape: OutlineInputBorder(
      borderSide: BorderSide(width: 0.5),
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(15.0),
        bottomRight: Radius.circular(15.0),
      ),
    ),
  ),
  ...
);

and my main.dart file is:

return GetMaterialApp(
      ...
      theme: customThemeDataLight,
      darkTheme: customThemeDataDark,
      themeMode: ThemeMode.system,
      ...
    );

To make your life easier, you could implement the provider package as a statemanagement solution to achieve a dark-light theme like [this](https://stackoverflow.com/a/64185945/15117201). — Jahn E., Dec 02 '21 at 11:09
Usually widgets can access the ThemeData like this: `Theme.of(context).primaryColor;` — Jahn E., Dec 02 '21 at 11:13
Thanks @JahnE. you gave me an idea. GetX handles themes as well as provider, by the way. — Eray, Dec 02 '21 at 11:41

score 1 · Accepted Answer · answered Dec 02 '21 at 11:47

MatterialButton doesn't access to themeData directly. So, I've made it access to themeData manually and it worked.

for instance:

MaterialButton(
      color: Get.theme.primaryColor,
      onPressed: () {
        ...
      },
      child: Icon(
        icon,
        color: Get.theme.iconTheme.color,
      ),
    );

this solved my problem.

change to MaterialButton's colour using ThemeData

1 Answers1