How to create a circle hole in Flutter maps?

1 min read

In Syncfusion® Flutter Maps, you can add circle hole and customize it easily by following the below steps.

Step 1: Add syncfusion_flutter_maps packages to your dependencies in pubspec.yaml file.

Step 2: By initializing the MapCircleLayer.inverted constructor, you can apply color to the area other than circle. To do that, add MapCircleLayer.inverted objects to the MapTileLayer sublayers collection and set the circles collection. You can customize the MapCircleLayer.inverted animation, color, strokeColor and strokeWidth properties.

late MapZoomPanBehavior _zoomPanBehavior;
@override
 void initState() {
   _zoomPanBehavior = MapZoomPanBehavior(minZoomLevel: 3);
   super.initState();
 }
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SfMaps(
       layers: [
         MapTileLayer(
           urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
           initialFocalLatLng: MapLatLng(-14.2350, -51.9253),
           sublayers: [
             MapCircleLayer.inverted(
               circles: [
                 MapCircle(
                   center: MapLatLng(-14.2350, -51.9253),
                   radius: 50,
                 ),
               ].toSet(),
               color: Colors.black.withOpacity(0.3),
               strokeColor: Colors.red,
               strokeWidth: 1,
             ),
           ],
           zoomPanBehavior: _zoomPanBehavior,
         ),
       ],
     ),
   );
 }

Screenshot:

Syncfusion circle hole image

Check the below links for more features in Syncfusion® Flutter Maps.

Live samples,

Did you find this information helpful?

Yes

Comments (0)

How to create a circle hole in Flutter maps?

Access denied