Flutter Web应用如何高效加载Shared Preferences主题配置避免逐层传参

核心优化思路 #

通过状态管理组件做全局依赖注入，替代手动逐层传参；将异步初始化逻辑内聚到ThemeProvider内部，无需提前在main方法阻塞等待。

方案1：使用Provider包实现（最常用） #

1 调整ThemeProvider，新增加载状态 #

class ThemeProvider extends ChangeNotifier {
  // 默认先使用系统主题，加载完成后替换为用户偏好
  ThemeMode _mode = ThemeMode.system;
  bool _isLoading = true;

  ThemeMode get mode => _mode;
  bool get isLoading => _isLoading;

  Future<void> loadPrefs() async {
    _isLoading = true;
    notifyListeners();
    bool isDark = await ThemePreference().isDark();
    _mode = isDark ? ThemeMode.dark : ThemeMode.light;
    _isLoading = false;
    notifyListeners();
  }

  // 你的主题切换方法
  void toggleTheme() {
    _mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    // 这里补充持久化存储逻辑
    notifyListeners();
  }
}

2 简化main方法，全局注入Provider #

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(
    // 全局注册ThemeProvider，所有子组件都可以直接获取实例
    ChangeNotifierProvider(
      create: (context) => ThemeProvider(),
      child: const MyApp(),
    ),
  );
}

3 改造MyApp，无需手动传参 #

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // 页面初始化完成后自动触发加载用户主题偏好
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Provider.of<ThemeProvider>(context, listen: false).loadPrefs();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, themeProvider, child) {
        // 加载阶段显示闪屏页，避免主题闪烁
        if (themeProvider.isLoading) {
          return MaterialApp(
            home: const SplashScreen(),
            debugShowCheckedModeBanner: false,
          );
        }
        // 加载完成后返回正式业务页面
        return MaterialApp(
          themeMode: themeProvider.mode,
          theme: yourLightTheme,
          darkTheme: yourDarkTheme,
          home: const HomePage(),
          debugShowCheckedModeBanner: false,
        );
      },
    );
  }
}

4 子页面使用示例 #

任意子组件需要切换主题时，直接获取全局Provider实例即可，无需逐层传参：

ElevatedButton(
  onPressed: () {
    Provider.of<ThemeProvider>(context, listen: false).toggleTheme();
  },
  child: const Text("切换主题"),
)

方案2：使用Riverpod实现（更简洁） #

如果使用Riverpod状态管理，无需手动注入和处理初始化时机：

1 定义全局Provider #

final themeProvider = ChangeNotifierProvider<ThemeProvider>((ref) {
  final provider = ThemeProvider();
  // 初始化时自动调用加载方法
  provider.loadPrefs();
  return provider;
});

2 简化main方法 #

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const ProviderScope(child: MyApp()));
}

3 MyApp直接消费Provider #

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final themeState = ref.watch(themeProvider);
    if (themeState.isLoading) {
      return MaterialApp(home: const SplashScreen());
    }
    return MaterialApp(
      themeMode: themeState.mode,
      theme: yourLightTheme,
      darkTheme: yourDarkTheme,
      home: const HomePage(),
    );
  }
}

方案优势 #

• 完全解耦：主题逻辑全部内聚在ThemeProvider中，业务层无需感知初始化流程
• 无参数传递：全局任意位置都可以直接获取主题实例，无需逐层透传
• 避免闪烁：新增加载状态，启动阶段显示闪屏页，不会出现主题突然切换的问题

内容的提问来源于stack exchange，提问作者nbz