Flutter BLoC流数据变化时UI不更新问题求助

开发采用BLoC模式的Flutter应用时，遇到Socket数据变化无法同步到UI的问题。负责Socket通信的SocketBloc，在新Socket数据到达时，UI始终不更新。已确认Socket事件正常，_socketResponse流能接收数据，但通过StreamBuilder监听时UI未重建。

相关代码如下：

SocketBloc代码 #

// [Include relevant imports]

class SocketBloc extends Bloc<SocketEvent, SocketState> {
  // [Constructor and initialization]

  final SocketRepo _socketRepository;
  final _socketResponse = StreamController<String>();
  Stream<String> get getResponse => _socketResponse.stream;

  void countNotification() {
    // [_socketRepository.emit] sends a socket request
    _socketRepository.emit('get-unread-notification-count');

    _socketRepository.on('unread_notification_count', (data) {
      _socketResponse.sink.add(data.toString());
     
    });
  }

  dispose() {
    _socketResponse.close();
  }
}

UI代码 #

void initState() {
  super.initState();
  BlocProvider.of<SocketBloc>(context).add(const SocketGetNotification());
}
....
StreamBuilder(
  stream: BlocProvider.of<SocketBloc>(context).getResponse,
  builder: (
    ctx,
    snapshot,
  ) {
    if (snapshot.hasData) {
      return Text(snapshot.data.toString());
    } else {
      return Text("Waiting");
    }
  }),

问题核心是未遵循BLoC模式的状态管理规范，在Bloc内部额外维护了独立的StreamController，导致UI无法感知状态变化。以下是修正步骤：

1. 定义Socket状态类 #

创建包含Socket数据的状态类，替代自定义的StreamController：

// 基础状态
abstract class SocketState extends Equatable {
  const SocketState();

  @override
  List<Object> get props => [];
}

// 初始状态
class SocketInitial extends SocketState {}

// 已获取通知计数的状态
class SocketNotificationCountLoaded extends SocketState {
  final String count;

  const SocketNotificationCountLoaded(this.count);

  @override
  List<Object> get props => [count];
}

2. 重构SocketBloc，使用BLoC自身的状态流 #

移除自定义的StreamController，在Bloc内部通过emit方法发送状态：

class SocketBloc extends Bloc<SocketEvent, SocketState> {
  final SocketRepo _socketRepository;

  SocketBloc(this._socketRepository) : super(SocketInitial()) {
    // 绑定事件处理
    on<SocketGetNotification>(_onGetNotification);
  }

  void _onGetNotification(SocketGetNotification event, Emitter<SocketState> emit) {
    _socketRepository.emit('get-unread-notification-count');
    
    // 监听Socket返回，发送状态
    _socketRepository.on('unread_notification_count', (data) {
      emit(SocketNotificationCountLoaded(data.toString()));
    });
  }

  @override
  Future<void> close() {
    // 这里可以添加Socket资源的清理逻辑
    return super.close();
  }
}

3. 重构UI，使用BlocBuilder监听状态变化 #

替换StreamBuilder为BlocBuilder（需导入flutter_bloc包），直接监听Bloc的状态流：

void initState() {
  super.initState();
  BlocProvider.of<SocketBloc>(context).add(const SocketGetNotification());
}
....
BlocBuilder<SocketBloc, SocketState>(
  builder: (ctx, state) {
    if (state is SocketNotificationCountLoaded) {
      return Text(state.count);
    } else {
      return Text("Waiting");
    }
  },
),

额外注意事项 #

• 确保SocketEvent中包含SocketGetNotification事件类，且继承自Equatable
• 每次Socket返回新数据时，通过emit发送新状态，BLoC会自动通知UI重建
• 不要在Bloc内部维护独立的StreamController，这违背BLoC设计原则，易导致状态不同步

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