如何在flutter中使用當前主題保存應用程序的狀態？

Question

我正在為我的應用程序設置暗模式和亮模式，但數據持久性存在問題，因為當我重新啟動應用程序時，我的主題會恢復到默認主題，而不是我上次在應用程序，經過一番研究，我提出用插件shared_preferences，但我不知道如何使用它在我的情況，因為我改變了這個主題，從暗到亮的方法是通過改變變量的toggleDarkTheme ThemeMode themeMode初始值()和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(
    ...
  );
}

主要.dart：

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

Answer 1

我在我的應用程序中使用帶有shared_preferences 的theme_mode_handler來切換和持久化主題。

下面是一個例子：

將theme_mode_handler添加到您的pubspec.yaml

dependencies:
  theme_mode_handler: ^3.0.0
  shared_preferences: ^2.0.6

創建一個實現IThemeModeManager接口的類：

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

Answer 2

看到這個樣板，有深色和淺色的主題。

我沒有使用它，但它有效： https : //github.com/zubairehman/flutter-boilerplate-project

他將 Mobx 與 Stores（參見 my_app.dart 和 themes_store.dart）以及 Provider（my_app.dart）一起使用。

所有顏色都在 app_theme.dart 中設置