Flutter Web 应用程序：高效加载主题首选项

Question

我的网络应用程序中有一个 dark/light 主题切换选项。我正在使用共享首选项来保留主题选择。我试图将主要 UI 与所有与主题相关的工作分开。所以我在我的主题提供者中创建了一个loadPrefs()：

loadPrefs() async {
    bool isDark = await ThemePreference().isDark();
    _mode = isDark ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }

问题是，由于这是一个异步函数，我无法在 MyApp 的构造函数中调用它，所以我似乎被迫在 main()

中调用它

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final app = await Firebase.initializeApp();
  ThemeProvider themeProvider = new ThemeProvider();
  await themeProvider.loadPrefs(); //HERE
  runApp(MyApp(themeProvider: themeProvider));
}

这真的很麻烦，因为现在我必须将主题提供程序传递给小部件，然后传递给小部件的状态 class。我觉得必须有一种更简单的方法来做到这一点。

class MyApp extends StatefulWidget {
  final ThemeProvider themeProvider;
  const MyApp({Key? key, required this.themeProvider}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState(themeProvider: themeProvider);
}

class _MyAppState extends State {
  ThemeProvider themeProvider;
  _MyAppState({required this.themeProvider});
...

Answer 1

按如下方式创建您的状态class

class _MyAppState extends State<MyApp> {

现在您可以使用 widget.themeProvider

访问 MyApp 中的所有变量

如果您想保持状态 class dynamic 那么您必须将小部件转换为

(widget as MyApp).themeProvider

为了更好地管理您的供应商，您可以使用

provider package 该软件包将帮助您轻松有效地管理所有提供商 Official talk 听听官方状态管理讲座

Flutter Web 应用程序：高效加载主题首选项

Flutter web app: Load prefs for theme efficiently

dart

flutter

flutter-web

按如下方式创建您的状态class