Flutter Web问题：SpeedDial覆盖层下Google Map仍可点击

Web端的Google Map基于HtmlElementView实现，会直接渲染在Flutter Widget树的上层，导致普通Flutter覆盖层无法拦截它的点击事件。flutter_speed_dial默认的全屏覆盖层没做指针拦截处理，所以展开后地图还能被点击。这里提供两种可行的解决办法：

方法一：自定义PointerInterceptor包裹的覆盖层 #

利用flutter_speed_dial提供的overlayWidget参数，把全屏覆盖层用PointerInterceptor包裹，直接拦截下层地图的指针事件：

Scaffold(
  ...
  body: Column(
    children: [
      ...
      SizedBox(
        height: 230,
        child: GoogleMap(...),
      ),
      ...
    ],
  ),
  floatingActionButton: SpeedDial(
    ...
    childPadding: const EdgeInsets.all(5),
    spaceBetweenChildren: 1,
    isOpenOnStart: false,
    // 替换默认覆盖层，用PointerInterceptor包裹
    overlayWidget: PointerInterceptor(
      child: Container(
        color: Colors.black54, // 保持原半透明背景效果
        width: double.infinity,
        height: double.infinity,
      ),
    ),
    children: [
      SpeedDialChild(
        onTap: () {
          ...
        },
        labelWidget: PointerInterceptor(
          child: Card(
            ...
          ),
        ),
      ),
    ],
  ),
)

方法二：根据SpeedDial状态禁用地图交互 #

通过跟踪SpeedDial的展开/收起状态，动态关闭或恢复Google Map的交互能力：

bool _isSpeedDialOpen = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: Column(
      children: [
        ...
        SizedBox(
          height: 230,
          child: GoogleMap(
            ...
            // 展开时禁用所有地图手势识别
            gestureRecognizers: _isSpeedDialOpen
                ? <Factory<OneSequenceGestureRecognizer>>{}
                : null, // 收起时恢复默认交互
          ),
        ),
        ...
      ],
    ),
    floatingActionButton: SpeedDial(
      ...
      childPadding: const EdgeInsets.all(5),
      spaceBetweenChildren: 1,
      isOpenOnStart: false,
      // 更新SpeedDial状态
      onOpen: () => setState(() => _isSpeedDialOpen = true),
      onClose: () => setState(() => _isSpeedDialOpen = false),
      children: [
        SpeedDialChild(
          onTap: () {
            ...
          },
          labelWidget: PointerInterceptor(
            child: Card(
              ...
            ),
          ),
        ),
      ],
    ),
  );
}

两种方法对比 #

• 方法一直接拦截指针事件，不需要修改地图状态，适合需要保持地图显示但完全禁止点击操作的场景。
• 方法二通过禁用地图交互实现，逻辑简单，适合不需要拦截覆盖层点击，只是不想让地图响应手势的场景。

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