MapCircleLayer.inverted constructor

const MapCircleLayer.inverted({
  1. Key? key,
  2. required Set<MapCircle> circles,
  3. Animation<double>? animation,
  4. double strokeWidth = 1,
  5. Color? color,
  6. Color? strokeColor,
  7. IndexedWidgetBuilder? tooltipBuilder,
})

You may highlight a specific area on a map to make it more readable by using the circles property of MapCircleLayer.inverted by adding mask to the outer region of the highlighted circles.

Only one MapCircleLayer.inverted can be added and must be positioned at the top of all sublayers added under the MapLayer.sublayers property.

 late List<MapLatLng> _circles;
 late MapShapeSource _mapSource;

 @override
 void initState() {
   _circles = const <MapLatLng>[
     MapLatLng(-14.235004, -51.92528),
     MapLatLng(51.16569, 10.451526),
     MapLatLng(-25.274398, 133.775136),
     MapLatLng(20.593684, 78.96288),
     MapLatLng(61.52401, 105.318756)
   ];

   _mapSource = MapShapeSource.asset(
     'assets/world_map.json',
     shapeDataField: 'name',
   );
   super.initState();
 }

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfMaps(
        layers: [
          MapShapeLayer(
            source: _mapSource,
            sublayers: [
              MapCircleLayer.inverted(
                circles: List<MapCircle>.generate(
                  _circles.length,
                  (int index) {
                    return MapCircle(
                      center: _circles[index],
                    );
                  },
                ).toSet(),
              ),
            ],
          ),
        ],
      ),
    );
  }

See also:
* [MapCircleLayer()], for normal circle shape on the map.

Implementation

const MapCircleLayer.inverted({
  Key? key,
  required this.circles,
  this.animation,
  this.strokeWidth = 1,
  this.color,
  this.strokeColor,
  IndexedWidgetBuilder? tooltipBuilder,
})  : _fillType = _VectorFillType.outer,
      super(key: key, tooltipBuilder: tooltipBuilder);