Flutter中点击窗口任意区域关闭Bottom Sheet失效问题求助

问题原因 #

你当前的实现存在两个核心问题：

1. GestureDetector仅包裹了BottomSheet的白色容器部分，点击面板外的阴影/空白区域时，根本触发不到这个onTap事件；
2. showBottomSheet是非模态的底部面板API，默认没有点击外部关闭的行为。

推荐解决方案：改用showModalBottomSheet #

showModalBottomSheet是Flutter官方提供的模态底部面板组件，默认支持点击外部区域关闭，且自带半透明背景，完全匹配你的需求，代码修改也更简洁：

1. 修改BottomSheet调用代码 #

child: IconButton(
  icon: Icon(Icons.camera_alt),
  onPressed: () {
    showModalBottomSheet(
      context: context,
      // 保留原有的圆角样式
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
      builder: (builder) => bottomSheet(),
    );
  },
),

2. 简化BottomSheet组件（移除无效的GestureDetector） #

Widget bottomSheet() {
  return Container(
    height: 137,
    width: MediaQuery.of(context).size.width,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          spreadRadius: 5,
          blurRadius: 7,
          offset: Offset(0, 3),
        ),
      ],
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        topRight: Radius.circular(20),
      ),
    ),
    child: Column(
      children: [
        Text(
          AppLocalizations.of(context)!.chooseprofilephoto,
          style: TextStyle(fontSize: 20.0),
        ),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              child: Row(
                children: [
                  Icon(Icons.camera, color: Colors.black),
                  SizedBox(width: 5),
                  Text(AppLocalizations.of(context)!.camera, style: TextStyle(color: Colors.black)),
                ],
              ),
              onPressed: () {
                takePhoto(ImageSource.camera);
                Navigator.pop(context); // 点击按钮后关闭面板
              },
            ),
            TextButton(
              child: Row(
                children: [
                  Icon(Icons.image, color: Colors.black),
                  SizedBox(width: 5),
                  Text(AppLocalizations.of(context)!.gallery, style: TextStyle(color: Colors.black)),
                ],
              ),
              onPressed: () {
                takePhoto(ImageSource.gallery);
                Navigator.pop(context);
              },
            ),
            TextButton(
              child: Row(
                children: [
                  Icon(Icons.remove_circle, color: Color.fromARGB(255, 255, 0, 0)),
                  SizedBox(width: 5),
                  Text(AppLocalizations.of(context)!.removephoto, style: TextStyle(color: Colors.black)),
                ],
              ),
              onPressed: () {
                removePhotoFromProfile();
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ],
    ),
  );
}

备选方案：基于showBottomSheet改造（不推荐） #

如果一定要使用showBottomSheet，可以通过嵌套GestureDetector和Stack实现点击外部关闭：

Widget bottomSheet() {
  return GestureDetector(
    onTap: () => Navigator.pop(context),
    behavior: HitTestBehavior.opaque,
    child: Stack(
      children: [
        // 铺满屏幕的透明层，点击后关闭面板
        Positioned.fill(child: Container(color: Colors.transparent)),
        // 原BottomSheet容器，通过空onTap消费事件，避免透传到外层
        GestureDetector(
          onTap: () {},
          child: Container(
            height: 137,
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3),
                ),
              ],
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            child: Column(
              // 原有的子组件内容...
            ),
          ),
        ),
      ],
    ),
  );
}

调用时可添加拖拽关闭支持：

showBottomSheet(
  context: context,
  enableDrag: true,
  builder: (builder) => bottomSheet(),
);

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