Flutter Dark Mode works initially, but once I leave the Drawer it stops

Question

I am having an issue with my DarkMode, it only works the first time I click into my Drawer and then it stops after that (see the screen recording) - wondering if someone could take a look and provide any guidance on how to fix this.

Link to what this looks like: https://i.stack.imgur.com/qa9fE.jpg

// main.dart
 Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Settings.init(cacheProvider: SharePreferenceCache());

  return runApp(
    ValueChangeObserver<bool>(
      cacheKey: DarkModeWidget.keyDarkMode,
      defaultValue: false,
      builder: (_, isDarkMode, __) => MaterialApp(
        title: 'Smash Up Companion',
        theme: isDarkMode
            ? ThemeData.dark().copyWith(
                primaryColor: AppColors.mainGreenColor,
                scaffoldBackgroundColor: const Color(0xFF170635),
                canvasColor: const Color(0xFF170635),
                //primarySwatch: Colors.blue,
                dividerColor: Colors.white,
              )
            : ThemeData.light().copyWith(
                primaryColor: AppColors.mainBlueColor,
                scaffoldBackgroundColor: Colors.white,
                canvasColor: Colors.white,
                dividerColor: AppColors.mainBlueColor),
...
}

//Dark Mode class
class DarkModeWidget extends StatelessWidget {
  static const keyDarkMode = 'key-dark-mode';
  const DarkModeWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SwitchSettingsTile(
      settingKey: keyDarkMode,
      leading: const IconWidget(
        icon: Icons.dark_mode,
        color: Color(0xFF642ef3),
      ),
      title: 'Dark Mode',
      onChange: (_) {},
    );
  }
}

I strongly advise learning how to use the GetX package: https://pub.dev/packages/get. It will help you in flutter in several ways including your issue. — Georgina, Aug 31 '22 at 17:43
Thanks - though I was informed that I should avoid additional packages like GetX.. hmm haha — SUD, Aug 31 '22 at 17:45
Trust me I am working on a huge project of a year plus and Getx has saved me a lot of times. — Georgina, Aug 31 '22 at 17:47
@SUD the flutter community has their own opinions on GetX, some people like it, some dont.. and its fine. but provider is the best and obvious choice for a state management solution when it comes to flutter. you can also use BLoC.. it is created by google. but it involves so many boilerplate codes. so go with provider. — Danny, Aug 31 '22 at 18:19
Thanks @Danny! I've actually integrated BLoC into my code, but not 100% sure how to use it, or how it could be used in this scenario — SUD, Aug 31 '22 at 18:21
@SUD i advise you to start there. https://bloclibrary.dev/#/gettingstarted check the documentation.. it will come handy for this type of requirement. — Danny, Aug 31 '22 at 18:33
Sorry to say, but avoid using Getx if you like to learn flutter, I prefer provider/riverpod/bloc — Md. Yeasin Sheikh, Aug 31 '22 at 19:32

score 0 · Answer 1 · answered Aug 31 '22 at 18:30

I suggest setting the theme: and darkTheme: properties of the MaterialApp with your ThemeData.light() and ThemeData.dark() Then use the themeMode: property to change the theme. I think this answer implements it the same way as you do: https://stackoverflow.com/a/67810007/7156819

This way you can also save the themeMode value in the local storage (shared_preferences) and persist it between app launches. I personally use GetX so I can't provide the full implementation.

Flutter Dark Mode works initially, but once I leave the Drawer it stops

1 Answers1