shapeColorMappers property

Collection of MapColorMapper which specifies shape's color based on the data.

It provides option to set the shape color based on the specific MapColorMapper.value or the range of values which falls between MapColorMapper.from and MapColorMapper.to.

Based on the returned values, legend items will be rendered. The text of legend item will be MapColorMapper.text of the MapColorMapper.

The below code snippet represents how color can be applied to the shape based on the MapColorMapper.value property of MapColorMapper.

late List<Model> _data;
late MapShapeSource _mapSource;

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

  _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].storage;
    },
    shapeColorMappers: [
       MapColorMapper(value: "Low", color: Colors.red),
       MapColorMapper(value: "High", color: Colors.green)
    ],
  );

  super.initState();
}

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

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

 final String country;
 final double count;
 final String storage;
}

The below code snippet represents how color can be applied to the shape based on the range between MapColorMapper.from and MapColorMapper.to properties of MapColorMapper.

late List<Model> _data;
late MapShapeSource _mapSource;

@override
void initState() {
  _data = <Model>[
   Model('India', 100, "Low"),
   Model('United States of America', 200, "High"),
   Model('Pakistan', 75, "Low"),
  ];

  _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].count;
    },
    shapeColorMappers: [
       MapColorMapper(from: 0, to:  100, color: Colors.red),
       MapColorMapper(from: 101, to: 200, color: Colors.yellow)
    ]
  );

  super.initState();
}

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

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

 final String country;
 final double count;
 final String storage;
}

Implementation

MapShapeSource class