Images temporarily reloading with other images when moving flutter map

Question

I'm using Firebase to load images onto a Flutter Map as CircleAvatar with CachedNetworkImage. The problem is that the images "dance" around or reload other images when I move the map around. I don't understand why other images will sometimes show in the spot where the image loads at. This is more obvious on mobile browser than on a desktop. How do I make it so that if the images need to be redrawn that they don't temporarily load another image into it for what is a microsecond. I don't understand if the cause of this is how I have my firebase query written or if this is a problem with the way the image values are stored in flutter. Example page and code linked below. What do I do to stop the images from doing this flickering or reloading?

My example page is linked here.

import 'package:cached_network_image/cached_network_image.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import "package:latlong2/latlong.dart";

class CustomMarker extends StatefulWidget {
  final double? latitude;
  final double? longitude;

  CustomMarker({this.latitude, this.longitude});

  @override
  _MapsPageState createState() => _MapsPageState();
}

class _MapsPageState extends State<CustomMarker> {
  List<Marker> list = [];
  List<String> listDocuments = [];

  @override
  void initState() {
    super.initState();
    setMarkers();
  }

  void setMarkers() async {
    FirebaseFirestore firestore = FirebaseFirestore.instance;
    Query<Map<String, dynamic>> collectionReference =
        firestore.collection('wllmtnnstpphotos');
    collectionReference.snapshots().listen((event) {
      List<DocumentSnapshot> snapshots = event.docs;
      for (var map in snapshots) {
        Map<String, dynamic> data =
            map.data() as Map<String, dynamic>; // add this line
        MarkerCollectModelPhoto model =
            MarkerCollectModelPhoto.fromMap(data); // use data here
        String nameDocument = map.id;
        listDocuments.add(nameDocument);
        Marker marker = customMarker(model, nameDocument);
        setState(() {
          list.add(marker);
        });
      }
    });
  }

  Marker customMarker(
      MarkerCollectModelPhoto markerCollectModelPhoto, String nameDocument) {
    return Marker(
      width: 30.0,
      height: 30.0,
      point: LatLng(markerCollectModelPhoto.lat!, markerCollectModelPhoto.lng!),
      builder: (ctx) => InkWell(
        child: Container(
          color: Colors.transparent,
          child: CircleAvatar(
            foregroundImage: CachedNetworkImageProvider(
                markerCollectModelPhoto.pathImageSmall!),
            backgroundColor: Colors.transparent,
            maxRadius: 30,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FlutterMap(
      options: new MapOptions(
          center: LatLng(44.8004173, -122.8543808), minZoom: 1.0, zoom: 8.5),
      layers: [
        new TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        MarkerLayerOptions(
          markers: list,
        ),
      ],
    ));
  }
}

class MarkerCollectModelPhoto {
  double? lat, lng;
  String? name, pathImage, pathImageSmall, dateTime, uid, mileager;

  MarkerCollectModelPhoto(
      {this.lat,
      this.lng,
      this.name,
      this.pathImage,
      this.pathImageSmall,
      this.dateTime,
      this.mileager,
      this.uid});

  MarkerCollectModelPhoto.fromMap(Map<String, dynamic> map) {
    lat = map['Lat'];
    lng = map['Lng'];
    name = map['Racer'];
    pathImage = map['PathImage'];
    pathImageSmall = map['PathImageSmall'];
    dateTime = map['DateTime'];
    mileager = map['mileager'];
    uid = map['Uid'];
  }
}

Answer 1

It's likely that Flutter is reusing your markers incorrectly. If you give them a unique key, Flutter won't reuse/rebuild them needlessly.

Try adding a UniqueKey() like this.

 return Marker(
      key: UniqueKey(),
      width: 30.0,
      height: 30.0,