Flutter Google Map increase marker icon size when being selected

Question

Is there any way to increase the icon size of the marker in the map when being selected?

I've tried putting List<BitmapDescriptor> where it composes of two bitmapDescriptor so I can easily call the bitmap if I need to show the small/big version of the icon

bitmapDescriptor[0] // small
bitmapDescriptor[1] // big

but I think setState doesn't work in Markers that's is why it's not updating the icon.

code:

      Marker(
        markerId: MarkerId(lBusLoc[index].businessID.toString()),
        position: LatLng(lBusLoc[index].latitude, lBusLoc[index].longitude),
        infoWindow: InfoWindow(title: '', snippet: '${bus.busName}'),
        icon: selectedBusId == bus.busId //condition
            ? bitmapDescriptor[1] //big
            : bitmapDescriptor[0], //small
        onTap: ()  {
         
          setState(() {
            selectedBusId = bus.busId;       
          });
        },
      ),

is there any better way to this?

Solution

The problem you are having is that Marker isn't a stateful widget so setState won't work with it. In fact it's not a Widget at all (it's a MapObject) so it has no builder method.

Whenever you tap a marker, you will need to replace your list of Markers with a new list and then use setState to rebuild the GoogleMap widget (which IS a stateful widget), using your new list of markers.

The code snippet below displays a set of blue icon markers. When you tap one it rebuilds all the markers setting the BitmapDescriptor of the selected pin to a green icon (you can just substitute green/blue icons with large/small BitmapDescriptors)

Hope this helps you solve your problem

final greenPin =
    BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen);
final bluePin = BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue);

class MyMapPage extends StatefulWidget {
  MyMapPage();

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

class _MyMapPageState extends State<MyMapPage> {
  var pinList = [
    MarkerDetails(1, LatLng(52, 1), bigIcon: greenPin, smallIcon: bluePin),
    MarkerDetails(2, LatLng(52, 1.1), bigIcon: greenPin, smallIcon: bluePin),
    MarkerDetails(3, LatLng(52, 1.2), bigIcon: greenPin, smallIcon: bluePin),
    MarkerDetails(4, LatLng(52, 1.3), bigIcon: greenPin, smallIcon: bluePin),
  ];
  var markerList;

  @override
  void initState() {
    super.initState();
    markerList = _generateMarkerList(pinList, 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        myLocationEnabled: true,
        myLocationButtonEnabled: false,
        markers: Set.from(markerList),
        initialCameraPosition:
            CameraPosition(target: pinList[0].position, zoom: 9),
      ),
    );
  }

  List<Marker> _generateMarkerList(
      List<MarkerDetails> detailsList, int selectedKey) {
    return detailsList
        .map((place) => Marker(
              position:
                  LatLng(place.position.latitude, place.position.longitude),
              markerId: MarkerId(place.key.toString()),
              infoWindow: InfoWindow(
                  title: place.key.toString(), snippet: place.toString()),
              onTap: () => setState(() =>
                  markerList = _generateMarkerList(detailsList, place.key)),
              icon: selectedKey == place.key ? place.bigIcon : place.smallIcon,
            ))
        .toList();
  }
}

class MarkerDetails {
  final int key;
  final LatLng position;
  final BitmapDescriptor bigIcon;
  final BitmapDescriptor smallIcon;
  MarkerDetails(this.key, this.position,
      {@required this.bigIcon, @required this.smallIcon});
}