Flutter Web强制使用CanvasKit后谷歌地图插件适配异常及ListView卡顿问题

一、先优化ListView滚动卡顿（无需强制全局CanvasKit） #

先尝试以下优化手段，大概率能解决移动端滚动卡顿问题，避免后续地图适配的麻烦：

• 使用ListView.builder替代静态ListView：只构建当前视口内的列表项，减少初始渲染压力
• 给无状态列表项添加const修饰符：阻止不必要的组件重建
• 复杂列表项实现AutomaticKeepAliveClientMixin：防止滚动出视口的组件被销毁重建

二、动态设置渲染器（兼顾移动端性能与桌面端地图交互） #

如果上述优化无效，再通过JS动态判断设备类型，针对性设置渲染器：
在index.html中替换原脚本为：

<script>
  // 检测移动设备
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  // 移动端用CanvasKit解决卡顿，桌面端保留默认HTML渲染
  window.flutterWebRenderer = isMobile ? 'canvaskit' : 'html';
</script>

三、修正Google Maps插件的交互逻辑 #

如果必须全局使用CanvasKit，可通过以下方式强制插件启用移动端交互：

1. Flutter代码内配置地图选项 #

初始化GoogleMapController时，明确设置手势与控件适配移动端：

import 'package:google_maps_flutter/google_maps_flutter.dart';

// 先判断当前设备是否为移动端（可通过package:device_info_plus或JS获取）
bool isMobile = ...;

final mapController = GoogleMap(
  onMapCreated: (controller) {
    controller.setMapOptions(
      MapOptions(
        gestureHandling: 'greedy', // 优先响应单指拖拽、缩放
        zoomControl: !isMobile, // 移动端隐藏缩放控件，依赖手势操作
        mapToolbarEnabled: !isMobile, // 移动端隐藏地图工具栏
      ),
    );
  },
  // 其他地图配置...
);

2. 通过JS直接修改地图实例 #

借助js包调用Google Maps原生API调整交互：

import 'package:js/js.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

@JS('google.maps.Map')
external class MapInstance {
  external void setOptions(dynamic options);
}

void setMobileMapBehavior(GoogleMapController controller) {
  // 获取地图实例
  final mapInstance = controller.mapId as dynamic;
  (mapInstance as MapInstance).setOptions({
    'gestureHandling': 'cooperative',
    'zoomControl': false,
  });
}

3. 给window添加移动端标识 #

在index.html中添加标识，让插件识别当前环境：

<script>
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  window.flutterWebRenderer = 'canvaskit';
  // 新增移动端标识
  if (isMobile) {
    window.isMobileDevice = true;
  }
</script>

然后在Flutter中通过dart:js读取该标识，对应调整地图配置。

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