Flutter实现新弹窗显示在已有弹窗下方的方案问询

要实现新弹窗显示在原有弹窗下方的需求，核心是直接操作Navigator的路由栈，将新弹窗路由插入到原有弹窗路由的前面。具体实现如下：

核心逻辑 #

1. 获取当前Navigator实例，定位栈中处于顶部的原有弹窗路由（DialogRoute）。
2. 创建新弹窗对应的DialogRoute，参数对齐showDialog的默认行为。
3. 将新路由插入到原有弹窗路由在栈中的位置之前。
4. 通知Navigator更新状态，确保路由栈变更生效。

完整代码示例 #

onPressed: () => showDialog(
  context: context,
  builder: (context) => Dialog(
    backgroundColor: Colors.red.shade200,
    child: TextButton(
      onPressed: () {
        final navigator = Navigator.of(context);
        // 找到当前栈顶的原有弹窗路由
        final currentDialogRoute = navigator.history.lastWhere(
          (route) => route is DialogRoute,
          orElse: () => null,
        );

        if (currentDialogRoute != null) {
          final index = navigator.history.indexOf(currentDialogRoute);
          // 创建新弹窗的DialogRoute，保持与默认showDialog一致的行为
          final secondDialogRoute = DialogRoute(
            context: context,
            builder: (context) => Dialog(
              backgroundColor: Colors.green.shade200,
              child: SizedBox(
                height: 100,
                child: TextButton(
                  onPressed: () {},
                  child: const Text("Second"),
                ),
              ),
            ),
            barrierDismissible: true,
            barrierColor: Colors.black54,
            barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
          );

          // 插入新路由到原有弹窗路由的前面
          navigator.history.insert(index, secondDialogRoute);
          // 通知Navigator刷新界面
          navigator.markNeedsUpdate();
        }
      },
      child: const Text("First")),
  ),
)

效果说明 #

• 点击第一个弹窗的按钮后，新弹窗路由被插入到原有路由下方，原有弹窗仍保持顶部显示。
• 关闭原有弹窗（点击空白区域或调用Navigator.pop(context)）后，栈顶的原有路由被移除，新弹窗自动显示出来。

这种方案无需引入虚拟路由，直接操作路由栈实现需求，逻辑简洁直观。

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