Question 79232 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter GetX Theme Mode Issue

I am currently working on an application where I have implemented the dark mode. It’s all working good when I switch it from light mode to dark mode. The problem starts when I switch back from dark mode to light mode. All the primary color and theme configurations I have added in the app they just get lost.

This is the code from my app start:


class TradeWixApp extends StatelessWidget {
  bool darkMode;
  TradeWixApp({Key? key, required this.darkMode}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      translations: Languages(),
      locale: Locale('en'),
      debugShowCheckedModeBanner: false,
      darkTheme: ThemeData(
        textTheme: TextTheme(
          titleMedium: TextStyle(color: Colors.white70),
          bodyMedium: TextStyle(color: Colors.white70),
        ),
        shadowColor: Colors.grey.shade900,
        brightness: Brightness.dark,
        backgroundColor: Colors.black,
        scaffoldBackgroundColor: Color.fromARGB(255, 37, 36, 36),
        appBarTheme: AppBarTheme(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          )),
          color: Color.fromARGB(200, 174, 242, 135),
          elevation: 0,
          foregroundColor: Colors.black,
        ),
        primaryColor: Color.fromARGB(200, 174, 242, 135),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.black,
            elevation: 0,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          ),
        ),
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(primary: Colors.grey),
        ),
      ),
      themeMode: darkMode ? ThemeMode.dark : ThemeMode.light,
      theme: ThemeData(
          backgroundColor: Colors.white,
          scaffoldBackgroundColor: Colors.white,
          appBarTheme: AppBarTheme(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            )),
            color: Color.fromARGB(255, 174, 242, 135),
            elevation: 0,
            foregroundColor: Colors.black,
          ),
          primaryColor: Color.fromARGB(255, 174, 242, 135),
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
              primary: Colors.black,
              elevation: 0,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)),
            ),
          ),
          textButtonTheme: TextButtonThemeData(
            style: TextButton.styleFrom(primary: Colors.grey),
          )),
      home: const SplashScreen(),
    );
  }
}

and the code where I am switching the dark mode is:

Obx(() {
                  return ListTile(
                      title: Text('Dark Mode'.tr),
                      trailing: Switch(
                        value: darkMode.value,
                        onChanged: (value) async {
                          darkMode.value = value;

                          Get.changeTheme(
                              !value ? ThemeData.light() : ThemeData.dark());
                          Get.changeThemeMode(
                              !value ? ThemeMode.light : ThemeMode.dark);
                          Get.reloadAll();
                          final prefs = await SharedPreferences.getInstance();
                          await prefs.setBool('darkMode', value);
                        },
                      ));
                })

This is the light before switching
This is the light before switching

This is the dark mode
This is the dark mode
This is the light mode after switching
This is the light mode after switching

Tags:

2

Answers


  1. 0

    Try to add

    themeMode: ThemeMode.system,

    to your GetMaterialApp.

    Login or Signup to reply.
  2. 0

    I don’t see why your using Get.changeTheme in your piece of code, you have set a theme, and darkTheme on your GetMaterialApp, so to toggle between them, you will need simply to call Get.changeThemeMode, but this:

    Get.changeTheme( !value ? ThemeData.light() : ThemeData.dark());

    The ThemeData.dark() and ThemeData.light() are new whole themes, I guess your goal is to toggle between light mode and dark mode, not to set a theme between a list of themes for example. so when you call Get.changeTheme(), you reset your app themes to the default light a dark ones ( which gives you the behavior that your themes are reset )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search