Flutter中Bloc结合Firestore Stream致Widget树指数级增长崩溃问题

核心问题定位 #

从现象来看，Bloc持续重建且状态始终停留在EstatesInitial，同时Widget树指数级重复添加根组件，大概率是Bloc的事件-状态逻辑触发了无限重建循环，或是MultiBlocProvider的错误嵌套/重复创建导致的。

常见排查方向及修复方案 #

1. 检查Bloc事件处理逻辑是否存在无限循环 #

如果EstatesBloc在处理事件时，每次都会重复触发相同事件（比如在on<Event>方法中直接添加同类型事件），会导致Bloc不断重建状态，进而触发依赖该Bloc的Widget反复重建。

• 修复示例：
  错误逻辑（会无限循环）：

  on<LoadEstates>((event, emit) async {
    final data = await firestore.collection('estates').get();
    emit(EstatesLoaded(data));
    add(LoadEstates()); // 重复触发加载事件，引发循环
  });
  

  正确逻辑：

  on<LoadEstates>((event, emit) async {
    emit(EstatesLoading());
    try {
      final data = await firestore.collection('estates').get();
      emit(EstatesLoaded(data));
    } catch (e) {
      emit(EstatesError(e.toString()));
    }
  });
  

2. 确认MultiBlocProvider的全局唯一性 #

若MultiBlocProvider被嵌套在会频繁重建的Widget中（比如页面的build方法、路由跳转目标页内），会导致每次重建都生成新的Bloc实例，进而触发整个Widget树重复添加。

• 修复：将MultiBlocProvider放在应用最顶层，确保全局只创建一次Bloc实例：

  void main() {
    runApp(
      MultiBlocProvider(
        providers: [
          BlocProvider(create: (context) => EstatesBloc(firestore)..add(LoadEstates())),
        ],
        child: const MyApp(),
      ),
    );
  }
  

  避免在MyApp或HomeScreen的build方法中再次创建MultiBlocProvider。

3. 检查状态类的Equatable实现是否正确 #

如果EstatesState子类没有正确重写props，Bloc会误判状态为全新状态，即使数据无变化也会触发Widget重建，长期积累可能引发循环。

• 修复：确保所有状态类正确继承Equatable并列出核心比较属性：

  abstract class EstatesState extends Equatable {
    const EstatesState();
  
    @override
    List<Object> get props => [];
  }
  
  class EstatesInitial extends EstatesState {}
  
  class EstatesLoading extends EstatesState {}
  
  class EstatesLoaded extends EstatesState {
    final List<Estate> estates;
  
    const EstatesLoaded(this.estates);
  
    @override
    List<Object> get props => [estates]; // 必须包含核心数据属性
  }
  

4. 过滤Firestream监听的重复快照 #

若使用stream监听Firestore集合，未过滤重复快照会导致Bloc不断接收相同数据并发出重复状态，触发Widget重建循环。

• 修复：用distinct()过滤重复快照：

  on<ListenEstates>((event, emit) async {
    emit(EstatesLoading());
    await emit.forEach(
      firestore.collection('estates').snapshots().distinct((previous, next) => 
        previous.docs.length == next.docs.length && 
        previous.docs.every((doc) => next.docs.any((d) => d.id == doc.id && d.data() == doc.data()))
      ),
      onData: (snapshot) => EstatesLoaded(snapshot.docs.map((d) => Estate.fromDoc(d)).toList()),
      onError: (e, stackTrace) => EstatesError(e.toString()),
    );
  });
  

5. 排查路由配置的循环跳转 #

即使简化了路由，若HomeScreen的路由配置错误，导致每次进入都重新创建根组件，也会引发Widget树重复添加。

• 修复：确保路由表直接指向HomeScreen：

  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: const HomeScreen(),
        routes: {
          '/home': (context) => const HomeScreen(),
        },
      );
    }
  }
  

调试建议 #

• 用Flutter DevTools的Widget Inspector查看Widget树结构，定位重复添加的起始点。
• 在Bloc的事件处理和状态发射方法中添加日志，追踪事件触发频率：

  on<LoadEstates>((event, emit) async {
    print('LoadEstates事件触发');
    emit(EstatesLoading());
    try {
      final data = await firestore.collection('estates').get();
      print('数据加载完成，发射EstatesLoaded状态');
      emit(EstatesLoaded(data));
    } catch (e) {
      print('加载错误: $e');
      emit(EstatesError(e.toString()));
    }
  });
  

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