Change active marker appearance - flutter google maps

user_16516595 0
Viewed 148

I'm using the flutter GoogleMap widget in my app to which I am adding markers :

Generated by mapping my bloc state.locationPoints

  • I've successfully implemented different appearances for those BitmapDescriptor markers through my customMarker() method

  • Now I'd also like to define a separate appearance for the same marker depending on wether it is active (tapped or not)

I've tried doing so using setState but it changes all of my markers appearances while I only want the current one to be changed

BlocBuilder<LocationBloc, LocationState>(
      builder: (context, state) {
        var markers = <Marker>{};
        if (state is LocationLoaded) {
          markers = state.locationPoints!.map((locationPoint) {
            return Marker(
              onTap: () {
            
              },
              icon: customMarker(locationPoint),
              position: LatLng(
                locationPoint.coordinates.latitude,
                locationPoint.coordinates.longitude,
              ),
            );
          }).toSet();
        }

        return GoogleMap(
          markers: markers,
        );
      },
    );
flutter-mapbox-gl fluttermap dart flutter google-maps-markers
1 Answers

You have to find the specific marker in your set of markers. If you provide your marker with an ID that contains some information from locationPoint, you could do something like this (in my case I use my place id as markerId):

  final markers = state.markers
    .map(
      (marker) => marker.markerId.value == state.selectedPlace.id
          ? marker.copyWith(
              iconParam: state.saveSelectedMarkerIcon,
            )
          : marker,
    )
    .toSet();
user_63661530
Related