Flutter中如何堆叠两个底部弹窗？及构建时setState报错咨询

报错原因 #

你遇到的setState() or markNeedsBuild() called during build.错误，本质是在Flutter组件的build构建过程中，触发了会改变UI状态或启动新弹窗的操作。

你的代码逻辑是StreamBuilder在build阶段监听状态，一旦检测到Error就直接调用showModalBottomSheet，但这个弹窗方法内部会触发UI树的更新（比如标记组件需要重建），而此时当前的build流程还没完成，Flutter框架不允许在构建过程中执行这类操作，否则会导致UI状态不一致，从而抛出该错误。

解决方法 #

核心思路是把showModalBottomSheet的调用延迟到当前build周期结束之后，让Flutter完成当前组件的构建，再执行弹窗操作。常用的两种实现方式：

方式1：使用WidgetsBinding.instance.addPostFrameCallback #

在StreamBuilder的builder回调中，当检测到Error状态时，通过addPostFrameCallback将弹窗操作放到当前帧构建完成后执行：

StreamBuilder(
  stream: yourStreamController.stream,
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      // 延迟到当前帧构建完成后再显示弹窗
      WidgetsBinding.instance.addPostFrameCallback((_) {
        showModalBottomSheet(
          context: context,
          builder: (ctx) => YourErrorBottomSheet(),
        );
      });
    }
    // 原有Pin输入弹窗的UI
    return PinInputBottomSheet();
  },
)

方式2：使用Future.microtask #

通过微任务将弹窗操作延后执行，同样能避开build过程：

StreamBuilder(
  stream: yourStreamController.stream,
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      Future.microtask(() {
        showModalBottomSheet(
          context: context,
          builder: (ctx) => YourErrorBottomSheet(),
        );
      });
    }
    return PinInputBottomSheet();
  },
)

额外注意事项 #

• 避免重复弹窗：可以添加一个状态变量（比如_isErrorSheetShown），标记错误弹窗是否已经显示，防止StreamBuilder多次触发时重复弹出。
• 弹窗上下文：确保showModalBottomSheet使用的上下文是正确的，避免因上下文被释放导致的异常，必要时可以使用GlobalKey获取安全的上下文。

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