Flutter中使用BLoC切换主题模式无效的问题排查与修复

问题原因 #

你当前的代码存在两个独立的AppCubit实例：

• main.dart中的BlocProvider创建了一个AppCubit，MaterialApp依赖这个实例的isDark值来切换主题模式
• HomeLayout中又通过BlocProvider创建了另一个全新的AppCubit，点击按钮修改的是这个实例的isDark值，和main.dart里的实例完全无关，因此主题不会发生变化

修复步骤 #

1. 移除HomeLayout中的BlocProvider #

HomeLayout作为MaterialApp的子组件，可以直接获取上层（main.dart）提供的AppCubit实例，无需重复创建。同时将数据初始化逻辑移到initState中：

修改后的HomeLayout代码：

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

  @override
  State<HomeLayout> createState() => _HomeLayoutState();
}

class _HomeLayoutState extends State<HomeLayout> {
  @override
  void initState() {
    super.initState();
    // 获取上层的AppCubit并初始化数据
    final cubit = AppCubit.get(context);
    cubit.getBusiness();
    cubit.getSports();
    cubit.getScience();
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<AppCubit, AppStates>(
      listener: (context, state) {},
      builder: (context, state) {
        final cubit = AppCubit.get(context);
        return Scaffold(
          appBar: AppBar(
            title: const Text('News App'),
            actions: [
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.search),
              ),
              IconButton(
                onPressed: cubit.changeAppMode,
                // 根据主题状态切换图标，提升用户体验
                icon: Icon(cubit.isDark ? Icons.light_mode : Icons.dark_mode),
              ),
            ],
          ),
          body: cubit.screens[cubit.currentIndex],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: cubit.currentIndex,
            onTap: cubit.changeBottomNavBar,
            items: cubit.bottomItems,
          ),
        );
      },
    );
  }
}

2. 保持main.dart的BlocProvider配置不变 #

main.dart中的BlocProvider是全局唯一的AppCubit实例来源，无需修改：

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) => AppCubit(),
      child: BlocConsumer<AppCubit, AppStates>(
        listener: (context, state) {},
        builder: (context, state) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            theme: MyThemes.lightTheme,
            darkTheme: MyThemes.darkTheme,
            themeMode: AppCubit.get(context).isDark ? ThemeMode.dark : ThemeMode.light,
            home: const HomeLayout(),
          );
        },
      ),
    );
  }
}

额外优化建议 #

• 可以在changeAppMode方法中添加持久化逻辑（比如用shared_preferences），确保重启App后主题状态不会丢失
• 保持Bloc实例的全局唯一性，避免在子组件中重复创建相同的BlocProvider

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