Flutter中showModalBottomSheet设isDismissible为false后如何检测屏障点击

方案1：Flutter 3.10+ 官方原生支持 #

3.10及以上版本的Flutter SDK已经为showModalBottomSheet新增了barrierOnTap回调参数，专门用于监听屏障区域的点击事件，直接传入你要执行的逻辑即可：

showModalBottomSheet(
  context: context,
  isDismissible: false, // 禁止点击屏障关闭弹窗
  // 监听屏障点击事件
  barrierOnTap: () {
    // 此处编写你要执行的业务逻辑
    debugPrint('屏障区域被点击');
  },
  builder: (BuildContext context) {
    return const YourCustomBottomSheetWidget();
  },
);

方案2：低版本Flutter兼容实现 #

如果你的项目使用的Flutter版本低于3.10，没有barrierOnTap参数，可以通过在弹窗结构中叠加全屏透明点击层的方式实现监听：

final MediaQueryData mediaQuery = MediaQuery.of(context);
showModalBottomSheet(
  context: context,
  isDismissible: false,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return Stack(
      children: [
        // 全屏透明层捕获屏障点击
        GestureDetector(
          onTap: () {
            // 此处编写屏障点击的业务逻辑
            debugPrint('屏障区域被点击');
          },
          behavior: HitTestBehavior.opaque,
          child: SizedBox(
            width: mediaQuery.size.width,
            height: mediaQuery.size.height,
          ),
        ),
        // 原底部弹窗内容，放在顶层避免被透明层拦截手势
        const YourCustomBottomSheetWidget(),
      ],
    );
  },
);

注意事项 #

• 方案2中要确保弹窗内容的层级在透明点击层之上，避免弹窗自身的点击事件被拦截
• 如果弹窗支持拖拽调整高度，需要额外处理拖拽手势和点击手势的冲突问题

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