bubbleColorValueMapper property

IndexedColorValueMapper? bubbleColorValueMapper

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;

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(
    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;


Widget build(BuildContext context) {
  return SfMaps(
    layers: [
        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;


final IndexedColorValueMapper? bubbleColorValueMapper;