Flutter Web中Google Map上层Widget点击与光标功能异常问题

在Flutter Web环境下，GoogleMap基于HTML渲染，会绕过Flutter的指针事件系统，导致上层Widget点击时同时触发地图的点击事件，以下是几种可行的解决方法：

方法一：使用PointerInterceptor拦截指针事件 #

这是最直接有效的方案，借助pointer_interceptor包的组件强制上层Widget接收指针事件，阻止事件穿透至下方地图。

1. 在pubspec.yaml中添加依赖：

dependencies:
  pointer_interceptor: ^0.9.3+1 # 请使用最新版本

2. 修改代码，用PointerInterceptor包裹上层交互组件：

Align(
  alignment: Alignment.center,
  child: PointerInterceptor(
    child: ElevatedButton(
      onPressed: (){
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Yay! A SnackBar!')));
      },
      child: const Text("Click me"),
    ),
  ),
),

方法二：自定义GoogleMap手势识别器 #

通过配置gestureRecognizers参数调整手势优先级，让上层Widget的手势先被识别。

修改GoogleMap的配置：

GoogleMap(
  initialCameraPosition: _cameraPosition,
  onTap: (latlng){
    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('on Map Tap')));
  },
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
    Factory<OneSequenceGestureRecognizer>(
      () => TapGestureRecognizer(),
    ),
  },
),

同时给上层组件包裹GestureDetector并设置事件行为：

Align(
  alignment: Alignment.center,
  child: GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: (){
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Yay! A SnackBar!')));
    },
    child: const ElevatedButton(
      onPressed: null, // 将点击逻辑移至GestureDetector
      child: Text("Click me"),
    ),
  ),
),

方法三：临时禁用地图交互（适合特定场景） #

如果不需要地图的交互功能，可使用AbsorbPointer包裹GoogleMap，阻止所有指针事件：

AbsorbPointer(
  absorbing: true, // 设置为true时地图不再接收任何指针事件
  child: GoogleMap(
    initialCameraPosition: _cameraPosition,
    onTap: (latlng){
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('on Map Tap')));
    },
  ),
),

若需动态切换地图交互状态，可将absorbing绑定至状态变量。

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