根据SharedPreference数据设置主题

Question

我对这个扑动应用程序的目标是根据存储的共享偏好数据更改主题(暗，光，系统)。我使用了Provider，这样每次用户更改主题时，整个应用程序都会根据所选的主题进行更新。问题是当用户第一次启动应用时，在我们能够从共享偏好中获得主题值之前，它就已经完成了构建。因此，当应用程序初始加载时，我们将获得主题的空值。我的代码只工作，如果用户在应用程序完成加载后更新主题值启动。

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'),
),
);
}
}

这是Provider类。注意，变量theme从存储的共享首选项数据中获取数据。

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;
}
}

Answer 1

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

Future<void> main() async {
...
final preferences = await SharedPreferences.getInstance();
runApp(MainApp(
preferences: preferences,
));
}

在您的示例中，您可以将主题值传递给MyApp小部件。