如何在Flutter中创建可同时操作屏幕的对话框？

要实现弹出对话框时仍能操作屏幕其他区域，你需要把默认的模态对话框改成非模态，核心是修改showDialog的参数，让背景区域不被事件拦截。以下是具体方案：

关键修改点 #

• 设置barrierColor: Colors.transparent：让对话框的遮罩层透明，允许底层控件接收触摸事件
• 设置barrierDismissible: false：避免点击背景时自动关闭对话框（如果需要点击背景关闭，可设为true）
• 按需调整对话框的位置和样式，确保它不会遮挡关键操作区域

修改后的完整代码示例 #

import 'package:flutter/material.dart';
import '../../static/my_icon_icons.dart';

void Checkout(BuildContext context) {
  showDialog(
    context: context,
    barrierColor: Colors.transparent, // 关键：透明遮罩，允许背景交互
    barrierDismissible: false, // 点击背景不关闭对话框（按需调整）
    builder: (BuildContext context) {
      int? currentPaymentMethod = 1;
      return Padding(
        padding: const EdgeInsets.fromLTRB(250, 662, 250, 0),
        child: Dialog(
          elevation: 4,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
          child: Container(
            width: double.infinity,
            padding: EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text("选择支付方式"),
                SizedBox(height: 12),
                RadioListTile(
                  value: 1,
                  groupValue: currentPaymentMethod,
                  title: Text("微信支付"),
                  onChanged: (val) {
                    // 处理支付方式切换逻辑
                  },
                ),
                RadioListTile(
                  value: 2,
                  groupValue: currentPaymentMethod,
                  title: Text("支付宝"),
                  onChanged: (val) {
                    // 处理支付方式切换逻辑
                  },
                ),
                SizedBox(height: 12),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: Text("取消"),
                    ),
                    SizedBox(width: 8),
                    ElevatedButton(
                      onPressed: () {
                        // 执行支付逻辑
                        Navigator.pop(context);
                      },
                      child: Text("确认支付"),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    },
  );
}

补充说明 #

如果需要更灵活的对话框展示（比如自由拖动、动态调整位置），可以直接使用OverlayEntry手动插入对话框到页面层级中，这种方式完全不受默认对话框的模态限制，但需要自己管理对话框的生命周期和状态。

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