Flutter GoogleMaps - dynamic colouring of Custom Markers

Viewed 5455

Flutter Google Maps allows the use of the standard/default Marker to be used on the map. You can also apply a colour to this marker programatically to add a variety of colours to your app.

However, what I can't seem to do is use this same technique to dynamically apply a colour to a custom (white) marker. Rather than make 10 custom markers with different colours I would prefer to have a plain white one, and dynamically colour it with a Hue or colour blend.

Default Marker

    bool bToggle = true; 

    _markers.add(Marker(
        markerId: MarkerId(markerid),
        position: newPos,
        onTap: () {
          ...
        },
        infoWindow: InfoWindow(
          ...
        ),
        icon: BitmapDescriptor.defaultMarkerWithHue(
           (bToggle) ? BitmapDescriptor.hueYellow : BitmapDescriptor.hueRed
        ),        
      ));

Custom Marker

    _markers.add(Marker(
        markerId: MarkerId(markerid),
        position: newPos,
        onTap: () {
          ...
        },
        infoWindow: InfoWindow(
          ...
        ),
        icon: BitmapDescriptor.fromAssetImage(ImageConfiguration(devicePixelRatio: 2.5), 'assets/markers/pin-blue.png')
        ),        
      ));

Many thanks

1 Answers

The reason why the marker doesn't change its color to either BitmapDescriptor hues is because the screen needs to be rebuilt to detect the value change on bToggle. What you can do here is call setState() on value change.

Related