Flutter：使用 Getx 持久化主题

Question

I have the following example to change from dark to light mode using Getx. How i can make it Persisting? Can i use Getx to make it Persisting or need i to use another method. I tried already, but without success.

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Get.put(ThemeController());
    return Scaffold(
      appBar: AppBar(
        title: Text('Change Theme'),
        actions: [
          GetBuilder<ThemeController>(
              builder: (controller) => IconButton(
                  icon: Icon(
                    controller.isDarkMode ? Icons.light_mode : Icons.dark_mode,
                  ),
                  onPressed: () {
                    controller.toggleDarkMode();
                  }))
        ],
      ),
    );
  }
}

class ThemeController extends GetxController {
  bool isDarkMode = false;

  void toggleDarkMode() {
    isDarkMode = !isDarkMode;
    if (isDarkMode) {
      Get.changeTheme(themeDataDark);
    } else {
      Get.changeTheme(themeDataLight);
    }
    update();
  }
}

final ThemeData themeDataLight = new ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.orange[500],
    primaryColorBrightness: Brightness.light,
    scaffoldBackgroundColor: Colors.grey[200],

final ThemeData themeDataDark = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.orange[700],
  primaryColorBrightness: Brightness.dark,
  scaffoldBackgroundColor: Colors.grey[850],

);

Thanks in advance for the help.

Answer 1

Using Getx get_storage package you can save the theme

Here is a sample code to save and retrieve the theme mode

class ThemeHelper {
  final _box = GetStorage();
  final _key = 'isDarkMode';

  /// Get isDarkMode info from local storage and return ThemeMode
  ThemeMode get theme => _loadThemeFromBox() ? ThemeMode.dark : ThemeMode.light;

  /// Load isDarkMode from local storage and if it's empty, returns false (that means default theme is light)
  bool _loadThemeFromBox() => _box.read(_key) ?? false;

  /// Save isDarkMode to local storage
  _saveThemeToBox(bool isDarkMode) => _box.write(_key, isDarkMode);

  /// Switch theme and save to local storage
  void switchTheme() {
    Get.changeThemeMode(_loadThemeFromBox() ? ThemeMode.light : ThemeMode.dark);
    _saveThemeToBox(!_loadThemeFromBox());
  }
}

and inside your main.dart just call

 MaterialApp(
      ...
      ...
      themeMode: ThemeHelper().theme,
     
    )

To update the theme call ThemeHelper().switchTheme()