Flutter底部导航切换时Bloc状态重置异常问题排查

问题现象 #

开发Flutter项目时遇到异常：切换底部导航Tab时，FavoritesCubit的状态会被重置为空；但通过路由栈跳转页面时状态能正常保留，仅Tab切换场景出现该问题。

核心原因 #

你的代码中存在多个独立的FavoritesCubit实例：

• 在HomeScreen的MultiBlocProvider中创建了一个FavoritesCubit实例
• 在FavoritesScreen的BlocProvider中又创建了另一个全新的FavoritesCubit实例

这两个实例完全独立，状态互不共享。当你在Home页面添加收藏时，操作的是第一个实例的状态；切换到Favorites Tab时，页面会创建并使用第二个初始状态为空的实例，所以看起来像是状态被重置了。

而路由栈跳转时，Favorites页面会从父上下文（Home页面的上下文）中获取已存在的FavoritesCubit实例，因此状态能正常保留。

解决方案：全局共享单一Bloc实例 #

将FavoritesCubit的Provider提升到全局层级，让所有Tab页面共享同一个实例：

修改main.dart，把MultiBlocProvider移到MaterialApp外层，统一提供所有需要共享的Bloc：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_coffee/bloc/favorites/favorites_cubit.dart';
import 'package:flutter_coffee/bloc/home_coffees/home_coffees_cubit.dart';
import 'package:flutter_coffee/bloc/notifications/notifications_cubit.dart';
import 'package:flutter_coffee/custom_icons.dart';
import 'package:flutter_coffee/pages/favorites_screen.dart';
import 'package:flutter_coffee/pages/home_screen.dart';
import 'package:flutter_coffee/pages/cart_screen.dart';
import 'package:flutter_coffee/pages/notifications_screen.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(create: (_) => HomeCoffeesCubit()),
        BlocProvider(create: (_) => FavoritesCubit()),
        BlocProvider(create: (_) => NotificationsCubit()),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
          scaffoldBackgroundColor: const Color(0xFF201520),
          useMaterial3: true,
        ),
        debugShowCheckedModeBanner: false,
        home: DefaultTabController(
          length: 4,
          child: Scaffold(
            bottomNavigationBar: const TabBar(
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(width: 0.0),
              ),
              tabs: [
                Tab(icon: Icon(CustomIcons.home, size: 26)),
                Tab(icon: Icon(CustomIcons.cart, size: 26)),
                Tab(icon: Icon(CustomIcons.favorites, size: 26)),
                Tab(icon: Icon(CustomIcons.notifications, size: 29)),
              ],
              labelColor: Color(0xFFEFE3C8),
              unselectedLabelColor: Color(0xFF746763),
              dividerHeight: 78,
              dividerColor: Color(0xFF22151F),
              labelPadding: EdgeInsets.only(top: 12, bottom: 12),
            ),
            body: const TabBarView(
              physics: NeverScrollableScrollPhysics(),
              children: [
                HomeScreen(),
                CartScreen(),
                FavoritesScreen(),
                NotificationsScreen(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

同时移除各个页面内部的BlocProvider：

• 删除HomeScreen外层的MultiBlocProvider
• 删除FavoritesScreen和NotificationsScreen各自的BlocProvider

这样所有Tab页面都会使用同一个全局的FavoritesCubit实例，切换Tab时状态就不会被重置了。

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