Flutter中使用Overlay Popup实现穿透点击的问题求助

问题核心 #

你当前的实现存在两个关键问题：

1. 系统级悬浮窗默认会拦截所有点击事件，需配置Android窗口属性允许穿透
2. Draggable组件会主动消费点击事件，即使设置了透明背景也无法让点击透传到底层

解决方案 #

1. 配置Android窗口属性（必须） #

在AndroidManifest.xml中确保已添加悬浮窗权限：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

同时，若使用overlay_pop_up库，需确保创建Overlay时设置以下窗口标志（若库未提供配置，可能需要自定义Overlay实现）：

• FLAG_NOT_TOUCH_MODAL：允许底层窗口接收点击事件
• FLAG_WATCH_OUTSIDE_TOUCH：监听悬浮窗外的点击动作

2. 修改OverlayWidget布局，移除事件拦截 #

调整OverlayWidget代码，让红色圆形区域仅响应拖拽，不拦截点击：

class OverlayWidget extends StatelessWidget {
  const OverlayWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Stack(
        children: [
          Positioned.fill(
            child: Draggable(
              // 让拖拽容器仅处理拖拽逻辑，不拦截点击
              child: AbsorbPointer(
                absorbing: true, // 阻止红色圆形区域接收点击事件
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.red.withOpacity(0.3),
                        border: Border.all(color: Colors.red, width: 2.0),
                        shape: BoxShape.circle,
                      ),
                    ),
                    Center(
                      child: Text(
                        '•',
                        style: TextStyle(
                          fontSize: 40,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              feedback: Material(
                color: Colors.transparent,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.red.withOpacity(0.3),
                    border: Border.all(color: Colors.red, width: 2.0),
                    shape: BoxShape.circle,
                  ),
                ),
              ),
              onDraggableCanceled: (_, __) {},
            ),
          ),
        ],
      ),
    );
  }
}

3. 移除冗余代码 #

删除原代码中外层的GestureDetector，它会干扰事件透传逻辑，且空实现的onTap完全没必要。

关键说明 #

• AbsorbPointer(absorbing: true)：直接让红色圆形容器放弃所有事件接收权，点击会直接透传到底层组件
• 窗口标志配置：是系统级悬浮窗实现点击穿透的核心，没有这一步，上层Widget的任何调整都无效
• Draggable组件仅保留拖拽功能，不再拦截点击事件

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