如何在颤动中保存当前主题的应用程序状态？

Question

我正在为我的应用程序设置深色模式和浅色模式，但数据持久性存在问题，因为当我重新启动应用程序时，我的主题会恢复为默认主题，而不是我最后保留的主题我在应用程序中的时候，经过一些研究，有人建议我使用 shared_preferences 插件，但我不知道如何在我的案例中使用它，因为我将主题从暗色更改为亮色的方式是通过更改ThemeMode themeMode 初始值在 toggleDarkTheme() 和 toggleLightTheme() 方法中显示下面的代码，那么如何使用 shared_preferences?

在我的设备中保存该值

我的 theme_provider.dart 文件：

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:flutter_riverpod/flutter_riverpod.dart';

final themeProvider = ChangeNotifierProvider<ThemeProvider>((ref) {
  return ThemeProvider();
});

class ThemeProvider with ChangeNotifier {
  ThemeMode themeMode = ThemeMode.system;

  void toggleDarkTheme() {
    themeMode = ThemeMode.dark;
    notifyListeners();
  }

  void toggleLightTheme() {
    themeMode = ThemeMode.light;
    notifyListeners();
  }
}

mixin MyThemes {
  static final darkTheme = ThemeData.dark().copyWith(
    ...
  );
  static final lightTheme = ThemeData.light().copyWith(
    ...
  );
}

main.dart:

final themeStatus = watch(themeProvider);
    return MaterialApp(
      themeMode: themeStatus.themeMode,
      darkTheme: MyThemes.darkTheme,
      theme: MyThemes.lightTheme,

Answer 1

看这个样板，有深色和浅色主题。

我没有用过它，但它确实有效： https://github.com/zubairehman/flutter-boilerplate-project

他将 Mobx 与 Stores（参见 my_app.dart 和 themes_store.dart）以及 Provider（my_app.dart）一起使用。

所有颜色都设置在app_theme.dart

Answer 2

我在我的应用程序中使用 theme_mode_handler with shared_preferences 来切换和保留主题。

这是一个例子：

将 theme_mode_handler 添加到您的 pubspec.yaml

dependencies:
  theme_mode_handler: ^3.0.0
  shared_preferences: ^2.0.6

创建一个实现 IThemeModeManager 接口的 class：

import 'package:shared_preferences/shared_preferences.dart';
import 'package:theme_mode_handler/theme_mode_manager_interface.dart';

class ThemeManager implements IThemeModeManager{
  @override
  Future<String> loadThemeMode() async {
    final _prefs = await SharedPreferences.getInstance();
    return _prefs.getString("THEME_PREF");
  }

  @override
  Future<bool> saveThemeMode(String value) async {
    final _prefs = await SharedPreferences.getInstance();
    return _prefs.setString("THEME_PREF", value);
  }
}

使用 ThemeModeHandler 小部件包装 MaterialApp 并将其传递给您的管理器实例：

import 'package:theme_mode_handler/theme_mode_handler.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeModeHandler(
      manager: ThemeManager(),
      builder: (ThemeMode themeMode) {
        return MaterialApp(
          themeMode: themeMode,
          darkTheme: MyThemes.darkTheme,
          theme: MyThemes.lightTheme,
          home: MyHomePage(),
        );
      },
    );
  }
}

最后要更改主题，您可以使用：

ThemeModeHandler.of(context).saveThemeMode(ThemeMode.dark); //Dark theme
ThemeModeHandler.of(context).saveThemeMode(ThemeMode.light); //Light theme
ThemeModeHandler.of(context).saveThemeMode(ThemeMode.system); //System theme

如何在颤动中保存当前主题的应用程序状态？

How to save the state of the app with the current theme in flutter?

flutter

dart

sharedpreferences