根据 SharedPreference 数据设置主题答案

【问题标题】：Setting theme based on SharedPreference data根据 SharedPreference 数据设置主题
【发布时间】：2021-12-13 10:46:57
【问题描述】：

我对这个 Flutter 应用的目标是根据存储的 Shared Preferences 数据更改主题（Dark、Light、System）。我使用了 Provider，这样每次用户更改主题时，整个应用程序都会根据所选主题进行更新。问题是当用户第一次启动应用程序时，它在我们从 Shared Preference 中获取主题值之前就完成了构建。因此，当应用程序最初加载时，我们将获得主题的空值。我的代码仅在用户在应用程序启动完成加载后更新主题值时才有效。

  void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(ChangeNotifierProvider<PreferencesProvider>(
      create: (context) {
        return PreferencesProvider();
      },
      child: MyApp()));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    print(SettingsSharedPreferences.getThemeString());
    return ChangeNotifierProvider<HabitProvider>(
      create: (context) {
        return HabitProvider();
      },
      child: MaterialApp(
        darkTheme: ThemeData(brightness: Brightness.dark),
        themeMode: context.watch<PreferencesProvider>().theme == "System"
            ? ThemeMode.system
            : context.watch<PreferencesProvider>().theme == "Dark"
                ? ThemeMode.dark
                : context.watch<PreferencesProvider>().theme == "Light"
                    ? ThemeMode.light
                    : ThemeMode.system,
        home: MyHomePage(title: 'My App'),
      ),
    );
  }
}

这是提供者类。请注意，变量主题是从存储的共享首选项数据中获取其数据的。

class PreferencesProvider extends ChangeNotifier {
  String? theme =  SettingsSharedPreferences.getThemeString();
....
}

以下是我们从中获取主题值的共享偏好代码：

class SettingsSharedPreferences {
  static const _keytheme = "theme";
  static String _defaultTheme = "System";

  static setTheme(String theme) async {
    await sharedPreferences.setString(_keytheme, theme);
  }

  static Future<String?> getTheme() async {
    final sharedPreferences = await SharedPreferences.getInstance();
    if (sharedPreferences.getString(_keytheme) == null) {
      await setTheme(_defaultTheme);
    }
    return sharedPreferences.getString(_keytheme);
  }

  static String? getThemeString() {
    print("getThemeString");
    String? theme;
    getTheme().then((val) {
      theme = val;
    });
    return theme;
  }
}

【问题讨论】：

标签： flutter sharedpreferences flutter-provider

【解决方案1】：

我建议在构建应用程序并显示给用户之前加载首选项：

Future<void> main() async {
  ...
  final preferences = await SharedPreferences.getInstance();

  runApp(MainApp(
    preferences: preferences,
  ));
}

在您的情况下，您可以将主题值传递给 MyApp 小部件。

【讨论】：