shapeColorValueMapper property

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

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

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

The value returned from the shapeColorValueMapper 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 shape.

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;
    },
    shapeColorValueMapper: (int index) {
      return _data[index].color;
    }
  );

  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