Flutter Map拖动时标记的CachedNetworkImage跳变闪烁如何解决？

问题根源主要来自三个层面：重复堆积的标记数据、无唯一标识导致的组件复用错误、图片加载逻辑未适配地图频繁重绘的场景，对应修复步骤如下：

• 修正Firebase数据监听逻辑
  原有逻辑每次收到快照通知都会全量追加标记到列表，重复堆积的标记会导致重绘时出现重叠、图片错配。需要每次处理快照时先清空旧数据，批量处理完成后再统一更新状态，避免循环内反复调用setState。
  修正后的代码：

  void setMarkers() async {
    FirebaseFirestore firestore = FirebaseFirestore.instance;
    Query<Map<String, dynamic>> collectionReference =
        firestore.collection('wllmtnnstpphotos');
    collectionReference.snapshots().listen((event) {
      List<Marker> newMarkers = [];
      List<String> newDocIds = [];
      for (var map in event.docs) {
        Map<String, dynamic> data = map.data() as Map<String, dynamic>;
        MarkerCollectModelPhoto model = MarkerCollectModelPhoto.fromMap(data);
        String docId = map.id;
        // 避免重复添加同一份数据
        if (!newDocIds.contains(docId)) {
          newDocIds.add(docId);
          newMarkers.add(customMarker(model, docId));
        }
      }
      // 批量更新一次状态
      setState(() {
        list = newMarkers;
        listDocuments = newDocIds;
      });
    });
  }
  

• 为标记组件添加唯一Key
  Flutter重绘列表类组件时会通过Key匹配对应的渲染节点，没有唯一Key时会误复用其他位置的标记组件，直接导致图片错配。使用文档ID作为唯一Key即可解决该问题，同时优化图片加载逻辑，显式控制加载状态：
  修正后的标记生成代码：

  Marker customMarker(
      MarkerCollectModelPhoto markerCollectModelPhoto, String docId) {
    return Marker(
      width: 30.0,
      height: 30.0,
      point: LatLng(markerCollectModelPhoto.lat!, markerCollectModelPhoto.lng!),
      // 新增唯一Key
      key: ValueKey(docId),
      builder: (ctx) => InkWell(
        child: Container(
          color: Colors.transparent,
          // 改用ClipOval+CachedNetworkImage组合，控制加载状态
          child: ClipOval(
            child: CachedNetworkImage(
              // 显式指定缓存键，避免缓存命中错误
              cacheKey: markerCollectModelPhoto.pathImageSmall!,
              imageUrl: markerCollectModelPhoto.pathImageSmall!,
              width: 30,
              height: 30,
              fit: BoxFit.cover,
              // 加载过程中显示透明占位，避免白屏闪烁
              placeholder: (context, url) => const SizedBox.shrink(),
              // 加载失败显示灰色占位，可按需自定义
              errorWidget: (context, url, error) => Container(color: Colors.grey.shade300),
            ),
          ),
        ),
      ),
    );
  }
  

• 可选优化项
  1. 页面初始化时预先将所有标记的小图预加载到缓存中，拖动地图时无需临时发起网络请求，彻底避免加载闪烁
  2. 确保pathImageSmall对应的资源是分辨率30*30左右的压缩小图，大图加载耗时会加剧闪烁问题
  3. Web端可开启CachedNetworkImage的Web专属缓存配置，适配浏览器端缓存策略

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