bubbleColorValueMapper property

Returns a color or value based on which bubble color will be updated.

If this returns a color, then this color will be applied to the bubble straightaway.

If it returns a value other than the color, then you must set the MapShapeSource.bubbleColorMappers property.

The value returned from the bubbleColorValueMapper will be used for the comparison in the MapColorMapper.value or MapColorMapper.from and MapColorMapper.to. Then, the MapColorMapper.color will be applied to the respective bubble.

late List<Model> _data;
late MapShapeSource _mapSource;

@override
void initState() {
  _data = <Model>[
   Model('India', 280, "Low", Colors.red),
   Model('United States of America', 190, "High", Colors.green),
   Model('Pakistan', 37, "Low", Colors.yellow),
  ];

  _mapSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "name",
    dataCount: _data.length,
    primaryValueMapper: (int index) {
      return _data[index].country;
    },
    bubbleColorValueMapper: (int index) {
      return _data[index].color;
    },
    bubbleSizeMapper: (int index) {
      return _data[index].usersCount;
    }
  );

  super.initState();
}

 @override
Widget build(BuildContext context) {
  return SfMaps(
    layers: [
      MapShapeLayer(
        source: _mapSource,
      )
    ],
  );
}

class Model {
 const Model(this.country, this.usersCount, this.storage, this.color);

 final String country;
 final double usersCount;
 final String storage;
 final Color  color;
}

Implementation

MapShapeSource class