Add 'isFilled' field to Polygon class, fix issue with polygons doted border drawing and created example page for Polygons

example/lib/main.dart

@@ -19,6 +19,7 @@ import './pages/overlay_image.dart';
 import './pages/plugin_api.dart';
 import './pages/plugin_scalebar.dart';
 import './pages/plugin_zoombuttons.dart';
+import './pages/polygon.dart';
 import './pages/polyline.dart';
 import './pages/reset_tile_layer.dart';
 import './pages/sliding_map.dart';
@@ -61,6 +62,7 @@ class MyApp extends StatelessWidget {
         MovingMarkersPage.route: (context) => MovingMarkersPage(),
         CirclePage.route: (context) => CirclePage(),
         OverlayImagePage.route: (context) => OverlayImagePage(),
+        PolygonPage.route: (context) => PolygonPage(),
         SlidingMapPage.route: (_) => SlidingMapPage(),
         WMSLayerPage.route: (context) => WMSLayerPage(),
         CustomCrsPage.route: (context) => CustomCrsPage(),

example/lib/pages/polygon.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:latlong2/latlong.dart';
+
+import '../widgets/drawer.dart';
+
+class PolygonPage extends StatelessWidget {
+  static const String route = 'polygon';
+
+  @override
+  Widget build(BuildContext context) {
+    var notFilledPoints = <LatLng>[
+      LatLng(51.5, -0.09),
+      LatLng(53.3498, -6.2603),
+      LatLng(48.8566, 2.3522),
+    ];
+
+    var filledPoints = <LatLng>[
+      LatLng(55.5, -0.09),
+      LatLng(54.3498, -6.2603),
+      LatLng(52.8566, 2.3522),
+    ];
+
+    var notFilledDotedPoints = <LatLng>[
+      LatLng(49.29, -2.57),
+      LatLng(51.46, -6.43),
+      LatLng(49.86, -8.17),
+      LatLng(48.39, -3.49),
+    ];
+
+    var filledDotedPoints = <LatLng>[
+      LatLng(46.35, 4.94),
+      LatLng(46.22, -0.11),
+      LatLng(44.399, 1.76),
+    ];
+
+    return Scaffold(
+      appBar: AppBar(title: Text('Polygons')),
+      drawer: buildDrawer(context, PolygonPage.route),
+      body: Padding(
+        padding: EdgeInsets.all(8.0),
+        child: Column(
+          children: [
+            Padding(
+              padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
+              child: Text('Polygons'),
+            ),
+            Flexible(
+              child: FlutterMap(
+                options: MapOptions(
+                  center: LatLng(51.5, -0.09),
+                  zoom: 5.0,
+                ),
+                layers: [
+                  TileLayerOptions(
+                      urlTemplate:
+                          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                      subdomains: ['a', 'b', 'c']),
+                  PolygonLayerOptions(polygons: [
+                    Polygon(
+                      points: notFilledPoints,
+                      isFilled: false, // By default it's false
+                      borderColor: Colors.red,
+                      borderStrokeWidth: 4.0,
+                    ),
+                    Polygon(
+                      points: filledPoints,
+                      isFilled: true,
+                      color: Colors.purple,
+                      borderColor: Colors.purple,
+                      borderStrokeWidth: 4.0,
+                    ),
+                    Polygon(
+                      points: notFilledDotedPoints,
+                      isFilled: false,
+                      isDotted: true,
+                      borderColor: Colors.green,
+                      borderStrokeWidth: 4.0,
+                    ),
+                    Polygon(
+                      points: filledDotedPoints,
+                      isFilled: true,
+                      isDotted: true,
+                      borderStrokeWidth: 4.0,
+                      borderColor: Colors.lightBlue,
+                      color: Colors.lightBlue,
+                    ),
+                  ]),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/widgets/drawer.dart

@@ -20,6 +20,7 @@ import '../pages/overlay_image.dart';
 import '../pages/plugin_api.dart';
 import '../pages/plugin_scalebar.dart';
 import '../pages/plugin_zoombuttons.dart';
+import '../pages/polygon.dart';
 import '../pages/polyline.dart';
 import '../pages/reset_tile_layer.dart';
 import '../pages/sliding_map.dart';
@@ -98,6 +99,12 @@ Drawer buildDrawer(BuildContext context, String currentRoute) {
           PolylinePage.route,
           currentRoute,
         ),
+        _buildMenuItem(
+          context,
+          const Text('Polygons'),
+          PolygonPage.route,
+          currentRoute,
+        ),
         _buildMenuItem(
           context,
           const Text('MapController'),

lib/src/layer/polygon_layer.dart

@@ -35,6 +35,7 @@ class Polygon {
   final Color borderColor;
   final bool disableHolesBorder;
   final bool isDotted;
+  final bool isFilled;
   late final LatLngBounds boundingBox;
 
   Polygon({
@@ -45,6 +46,7 @@ class Polygon {
     this.borderColor = const Color(0xFFFFFF00),
     this.disableHolesBorder = false,
     this.isDotted = false,
+    this.isFilled = false,
   }) : holeOffsetsList = null == holePointsList || holePointsList.isEmpty
             ? null
             : List.generate(holePointsList.length, (_) => []);
@@ -193,9 +195,9 @@ class PolygonPainter extends CustomPainter {
   void _paintDottedLine(Canvas canvas, List<Offset> offsets, double radius,
       double stepLength, Paint paint) {
     var startDistance = 0.0;
-    for (var i = 0; i < offsets.length - 1; i++) {
-      var o0 = offsets[i];
-      var o1 = offsets[i + 1];
+    for (var i = 0; i < offsets.length; i++) {
+      var o0 = offsets[i % offsets.length];
+      var o1 = offsets[(i + 1) % offsets.length];
       var totalDistance = _dist(o0, o1);
       var distance = startDistance;
       while (distance < totalDistance) {
@@ -247,7 +249,8 @@ class PolygonPainter extends CustomPainter {
     } else {
       canvas.clipRect(rect);
       paint
-        ..style = PaintingStyle.fill
+        ..style =
+            polygonOpt.isFilled ? PaintingStyle.fill : PaintingStyle.stroke
         ..color = polygonOpt.color;
 
       var path = Path();