如何解决StreamBuilder中调用notifyListeners()的build阶段报错问题

这个断言是Flutter框架的构建流程保护机制触发的：

• Flutter组件的build阶段是同步执行的，这个阶段只允许执行UI构建相关的只读逻辑，禁止任何会触发组件重新标记为待构建的状态更新操作。
• 你将provider.addItem()直接写在了StreamBuilder的builder回调内，而builder回调本身就属于构建流程的一部分：当流推送新数据、或是组件因其他原因重建时，该回调会被同步执行。
• addItem方法内调用的notifyListeners()会立刻通知所有依赖该Provider的组件标记为需要重建，相当于当前组件还未完成本次构建，就发起了新的构建请求，直接触发断言报错。

方案1：分离流监听与UI构建逻辑（推荐） #

不要在StreamBuilder的builder回调中处理业务状态更新，在页面初始化阶段单独监听WebSocket流，在流的异步监听回调中更新Provider状态，StreamBuilder仅负责根据快照渲染UI即可。
示例代码：

class _YourPageState extends State<YourPage> {
  late Stream _webSocketStream;
  late StreamSubscription _streamSubscription;

  @override
  void initState() {
    super.initState();
    _webSocketStream = // 初始化你的WebSocket连接流
    final provider = context.read<ProviderModel>();
    // 流监听回调为异步执行，不会阻塞构建流程
    _streamSubscription = _webSocketStream.listen((newMessage) {
      // 可加判断避免重复添加
      provider.addItem('I was added');
    });
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _webSocketStream,
      builder: (context, snapshot) {
        // 此处仅做UI渲染，不执行任何状态修改操作
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        }
        if (snapshot.hasData) {
          return const Text('收到服务端消息');
        }
        return const Text('等待连接');
      },
    );
  }

  @override
  void dispose() {
    // 取消流订阅、关闭WebSocket连接，避免内存泄漏
    _streamSubscription.cancel();
    super.dispose();
  }
}

方案2：延后状态更新到构建完成后执行（兜底方案） #

如果确实需要在builder回调中触发状态更新，可以使用addPostFrameCallback将更新逻辑延后到当前帧构建完成之后再执行，避开构建流程的限制。
示例代码：

builder: (context, snapshot) {
  if (snapshot.hasData) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 注意加去重判断，避免builder多次触发导致重复添加元素
      context.read<ProviderModel>().addItem('I was added');
    });
  }
  return // 对应UI逻辑
}

注意：无论使用哪种方案，都需要增加消息去重判断，因为Flutter的build方法可能因多种外因触发，StreamBuilder的builder回调可能多次执行，不做去重会出现列表重复添加相同元素的问题。

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