Search code examples
flutterflutter-layoutflutter-getx

change to MaterialButton's colour using ThemeData


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

Solution

  • 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.