Flutter底部弹窗外部点击处理：点击外部时显示警告对话框而非关闭弹窗

要实现点击底部弹窗外部时不关闭弹窗，而是触发警告对话框的需求，我们需要完成两个核心操作：禁用默认的外部点击关闭行为，以及捕获外部点击事件并弹出警告。下面结合你的代码给出完整的解决方案：

步骤1：禁用默认外部点击关闭行为 #

首先在showModalBottomSheet中设置barrierDismissible: false，这样点击弹窗外部的遮罩层时，不会自动关闭弹窗：

showModalBottomSheet(
  // 保留你已有的shape、backgroundColor等参数
  barrierDismissible: false, // 关键：阻止默认的外部点击关闭逻辑
  builder: (context) => ...
)

步骤2：捕获外部点击并触发警告 #

用GestureDetector包裹底部弹窗的内容，利用它的onTapOutside回调监听外部点击事件；同时保留WillPopScope处理系统返回键的逻辑，确保返回键也触发相同的警告流程：

完整修改后的代码 #

_showBottomSheet(ctx) async {
  await showModalBottomSheet(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(10.0))),
    backgroundColor: Colors.white,
    context: ctx,
    isScrollControlled: true,
    barrierDismissible: false, // 禁用默认外部点击关闭
    builder: (context) => WillPopScope(
      onWillPop: () async {
        // 处理返回键点击，弹出警告对话框
        bool shouldClose = await _showExitWarningDialog(context);
        return shouldClose;
      },
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTapOutside: () {
          // 监听弹窗外部点击，弹出警告对话框
          _showExitWarningDialog(context);
        },
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 18),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4.0),
                child: TextFormField(
                  textInputAction: TextInputAction.next,
                  decoration: InputDecoration(
                    hintText: 'text field1.',
                    border: InputBorder.none
                  ),
                  autofocus: true, // 仅给第一个输入框设置自动聚焦，避免冲突
                ),
              ),
              SizedBox(height: 8.0),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4.0),
                child: TextFormField(
                  textInputAction: TextInputAction.next,
                  decoration: InputDecoration(
                    hintText: 'test field 2',
                    border: InputBorder.none
                  ),
                ),
              ),
              SizedBox(height: 10),
              Padding(
                padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom),
                child: Row(
                  children: [
                    ElevatedButton(
                      onPressed: (){
                        // 保存完成后手动关闭弹窗
                        Navigator.of(context).pop();
                      },
                      child: Icon(Icons.save),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
  print('Bottom sheet closed');
}

// 自定义退出警告对话框
Future<bool> _showExitWarningDialog(BuildContext context) async {
  return await showDialog(
    context: context,
    barrierDismissible: false, // 警告对话框需手动操作关闭
    builder: (dialogContext) => AlertDialog(
      title: Text('警告'),
      content: Text('你确定要退出吗？未保存的内容将会丢失！'),
      actions: [
        TextButton(
          onPressed: () {
            // 取消：关闭警告对话框，保留底部弹窗
            Navigator.of(dialogContext).pop(false);
          },
          child: Text('取消'),
        ),
        TextButton(
          onPressed: () {
            // 确定：先关闭警告对话框，再关闭底部弹窗
            Navigator.of(dialogContext).pop(true);
            Navigator.of(context).pop();
          },
          child: Text('确定'),
        ),
      ],
    ),
  ) ?? false;
}

关键细节说明 #

1. barrierDismissible: false：这是阻止默认外部点击关闭的核心设置，确保遮罩层点击不会触发弹窗关闭。
2. GestureDetector.onTapOutside：专门监听组件外部的点击事件，完美匹配“点击弹窗外部”的需求场景。
3. WillPopScope.onWillPop：处理系统返回键的逻辑，让返回键也触发相同的警告对话框，保持交互一致性。
4. 输入框自动聚焦：你之前给两个输入框都设置了autofocus: true，这会导致聚焦冲突，建议仅给第一个输入框设置自动聚焦。

这样修改后，无论点击弹窗外部还是按返回键，都会先弹出警告对话框，用户确认后才会关闭底部弹窗，完全符合你的需求。

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