flutterflutter-dependenciesflutter-getxflutter-packages

Getx flutter change theme when i change theme dark and then return light mode its not loading my custom theme


Getx flutter when i change theme from light to dark mode and then return to light mode its not returning my custom theme its load old app bar background even theme changes enter image description here

ThemeData lightTheme = ThemeData(
  useMaterial3: true,
  backgroundColor: Colors.white,
  appBarTheme: AppBarTheme(
    elevation: 1000,
    backgroundColor: Colors.white,
  )
);
ThemeData darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.red);

Getx flutter when i change theme from light to dark mode and then return to light mode its not returning my custom theme its load old app bar background even theme changes


class _MyMaterialAppState extends State<MyMaterialApp> {

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: appName,
      theme: lightTheme,
      darkTheme: darkTheme,
      translations: Languages(),
      locale: Get.deviceLocale,
      fallbackLocale: const Locale('en', 'US'),
      home: const MyHomePage(),
    );
  }
}

Solution

  • Probably, this is because of the GetMaterialApp widget in the build method. Because the build method is called every time the widget is updated, this means that your custom theme will be overwritten. You can do something like this:

    class _MyMaterialAppState extends State<MyMaterialApp> {
    
      GetxController<ThemeData> _themeController = GetxController(lightTheme);
    
      @override
      Widget build(BuildContext context) {
        return GetBuilder<GetxController<ThemeData>>(
          init: _themeController,
          builder: (_, theme) {
            return GetMaterialApp(
              debugShowCheckedModeBanner: false,
              title: appName,
              theme: theme.value,
              darkTheme: darkTheme,
              translations: Languages(),
              locale: Get.deviceLocale,
              fallbackLocale: const Locale('en', 'US'),
              home: const MyHomePage(),
            );
          },
        );
      }
    }
    

    This code uses GetBuilder to listen for changes to the _themeController and update theme property. To change the theme:

    _themeController.updateValue(newTheme)