Flutter - Applying theme mode Dark/Light from a boolean variable in Shared preferences using Provider

user_6689583 0
Viewed 1218

I am using Provider to manage the Dark/Light theme across a Flutter mobile application and I need to store the theme setting in Shared Preferences as a boolean currently the theme setting is controlled via a Switch. I couldn't figure out how to do it and couldn't make my way around Shared Prefs.

Below is my attempt at implementing said feature but couldn't make it work.

Q: How to implement Shared Prefs and store the theme data inside?

Switch button widget:

class ThemeToggle extends StatelessWidget {
  setThemeModeSP(bool isDark) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setBool('isDarkEnabled', isDark);
  }

  isPresentSP(String prefKey) async {
    SharedPreferences sp = await SharedPreferences.getInstance();
    if (sp.containsKey(prefKey)) {
      return true;
    } else {
      return false;
    }
  }

  removeThemeModeSP() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.remove('isDarkEnabled');
  }

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return Switch.adaptive(
      value: themeProvider.isDarkMode,
      onChanged: (value) {
          final provider = Provider.of<ThemeProvider>(context, listen: false);
          provider.toggleTheme(value);
          setThemeModeSP(value);
      });
  }
}

Theme provider class

class ThemeProvider extends ChangeNotifier {
  ThemeMode themeMode = ThemeMode.light;
  bool get isDarkMode => themeMode == ThemeMode.dark;
  void toggleTheme(bool isOn) {
    themeMode = isOn ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

UPDATE: I MANAGED TO STORE A DARK MODE BOOLEAN IN SHARED PREFERENCES BUT WHEN I RETRIEVE IT THE THEME DOES NOT CHANGE

I tested and found the the boolean value is stored and retrieved successfully the only problem that remains is that the theme goes back to default when app is restarted

Here are the changes I made:

Switch button widget:

class ThemeToggle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return Switch.adaptive(
      value: themeProvider.isDarkMode,
      onChanged: (value) {
          final provider = Provider.of<ThemeProvider>(context, listen: false);
          provider.toggleTheme(value);
          mSharedPrefs.setBool('myThemeMode', value);
      });
  }
}

Theme provider class

  isPresentSP(String prefKey) async {
    SharedPreferences sp = await SharedPreferences.getInstance();
    if (sp.containsKey(prefKey)) {
      return true;
    } else {
      return false;
    }
  }

Future<bool> fetchThemeSettingsFromSP() async {
    SharedPreferences mSharedPrefs = await SharedPreferences.getInstance();
    try {
      if (isPresentSP('myThemeMode') == false) {
        return false;
      } else {
        var spr = mSharedPrefs.getBool('myThemeMode');
        if (spr != null) {
          if (spr) {
            return true;
          } else if (!spr) {
            return false;
          }
        } else if (spr == null) {
          return false;
        }
      }
      return false;
    } catch (e) {
      print('fetch theme from SP err: ' + e.toString());
      return false;
    }
  }

 themeModeSettings() {
    fetchThemeSettingsFromSP().then((val) {
      if (val == null) {
        return false;
      } else {
        return val;
      }
   });
}

class ThemeProvider extends ChangeNotifier {
  ThemeMode themeMode = ThemeMode.light;
  bool get isDarkMode => themeModeSettings() ?? themeMode == ThemeMode.dark;
  void toggleTheme(bool isOn) {
    themeMode = isOn ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}
flutter provider sharedpreferences
1 Answers

in ThemeToggle class:

class ThemeToggle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return Switch.adaptive(
      value: themeProvider.getThemeBoolSP().toString() == 'false' ? false : true,
      onChanged: (value) async {
          SharedPreferences mSharedPrefs = await SharedPreferences.getInstance();
          final provider = Provider.of<ThemeProvider>(context, listen: false);
          provider.toggleTheme(value);
          mSharedPrefs.setBool('myThemeMode', value);
      });
  }
}

in ThemeProvider class:

class ThemeProvider extends ChangeNotifier {
  getThemeBoolSP() async {
    SharedPreferences mSharedPrefs = await SharedPreferences.getInstance();
    return mSharedPrefs.getBool('myThemeMode');
  }

  ThemeMode themeMode = ThemeMode.light;
  bool get isDarkMode => themeMode == ThemeMode.dark;

  void toggleTheme(bool isOn) {
    themeMode = isOn ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

in main.dart/MyApp class:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => ChangeNotifierProvider(
      create: (context) => ThemeProvider(),
      builder: (context, _) {
        final themeProvider = Provider.of<ThemeProvider>(context);
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          themeMode: themeProvider.getThemeBoolSP().toString() == 'false' ? ThemeMode.light : ThemeMode.dark,
          theme: UIThemes.lightTheme,
          darkTheme: UIThemes.darkTheme,
          home: Newsfeed(),
        );
      });
}
user_66895830
Related