Support for flutter_map version 4.0.0

README.md

@@ -8,8 +8,6 @@ A basic line and polygon editor that works with [`flutter_map`](https://github.c
 
 ![Demo](./line_editor_poly.gif)
 
-**Note**: As of Flutter_map 0.14 you need to add `allowPanningOnScrollingParent: false` to your `MapOptions`
-
 See the `example` directory for basic usage, here are the most important features:
 
 - Tap the map to add a marker, add as many as you want.
@@ -20,7 +18,7 @@ See the `example` directory for basic usage, here are the most important feature
 Set up a new editor instance with:
 
 ```dart
-polyEditor = new PolyEditor(
+var polyEditor = PolyEditor(
   points: testPolyline.points,
   pointIcon: Icon(Icons.crop_square, size: 23),
   intermediateIcon: Icon(Icons.lens, size: 15, color: Colors.grey),

example/lib/list_page.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map/plugin_api.dart';
+import 'package:flutter_map_line_editor/dragmarker.dart';
+import 'package:flutter_map_line_editor/polyeditor.dart';
+import 'package:latlong2/latlong.dart';
+
+class ListPage extends StatefulWidget {
+  const ListPage({Key? key}) : super(key: key);
+
+  @override
+  State<ListPage> createState() => _ListPageState();
+}
+
+class _ListPageState extends State<ListPage> {
+  late PolyEditor polyEditor;
+
+  List<Polyline> polyLines = [];
+  var testPolyline = Polyline(color: Colors.deepOrange, points: []);
+
+  @override
+  void initState() {
+    super.initState();
+
+    polyEditor = PolyEditor(
+      addClosePathMarker: false,
+      points: testPolyline.points,
+      pointIcon: const Icon(Icons.crop_square, size: 23),
+      intermediateIcon: const Icon(Icons.lens, size: 15, color: Colors.grey),
+      callbackRefresh: () {
+        debugPrint("polyedit setstate");
+        setState(() {});
+      },
+    );
+
+    polyLines.add(testPolyline);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('List example')),
+      body: Center(
+        child: ListView.builder(
+          itemCount: 10,
+          itemBuilder: (context, index) {
+            if (index == 4) {
+              return SizedBox(
+                height: 200,
+                child: Card(
+                  child: FlutterMap(
+                    options: MapOptions(
+                      onTap: (_, ll) {
+                        polyEditor.add(testPolyline.points, ll);
+                      },
+                      center: LatLng(45.5231, -122.6765),
+                      zoom: 3.4,
+                    ),
+                    children: [
+                      TileLayer(
+                          urlTemplate:
+                              'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                          subdomains: const ['a', 'b', 'c']),
+                      PolylineLayer(polylines: polyLines),
+                      DragMarkers(markers: polyEditor.edit()),
+                    ],
+                  ),
+                ),
+              );
+            }
+            return SizedBox(
+              height: 100,
+              child: Card(
+                child: Align(
+                  alignment: Alignment.center,
+                  child: Text("List Item $index"),
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        child: const Icon(Icons.replay),
+        onPressed: () {
+          setState(() {
+            testPolyline.points.clear();
+          });
+        },
+      ),
+    );
+  }
+}

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:example/list_page.dart';
 import 'package:example/polygon_page.dart';
 import 'package:example/polyline_page.dart';
 import 'package:flutter/material.dart';
@@ -25,6 +26,7 @@ class _AppState extends State<App> {
           children: const [
             PolylinePage(),
             PolygonPage(),
+            ListPage(),
           ],
         ),
         bottomNavigationBar: BottomNavigationBar(
@@ -40,7 +42,11 @@ class _AppState extends State<App> {
             BottomNavigationBarItem(
               icon: Icon(Icons.dashboard_outlined),
               label: 'Polygon',
-            )
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.list),
+              label: 'List',
+            ),
           ],
         ),
       ),

example/lib/polygon_page.dart

@@ -16,7 +16,8 @@ class _PolygonPageState extends State<PolygonPage> {
   late PolyEditor polyEditor;
 
   List<Polygon> polygons = [];
-  var testPolygon = Polygon(color: Colors.deepOrange, isFilled: true, points: []);
+  var testPolygon =
+      Polygon(color: Colors.deepOrange, isFilled: true, points: []);
 
   @override
   void initState() {
@@ -40,8 +41,6 @@ class _PolygonPageState extends State<PolygonPage> {
       body: Center(
         child: FlutterMap(
           options: MapOptions(
-            //allowPanningOnScrollingParent: false,
-            absorbPanEventsOnScrollables: false,
             onTap: (_, ll) {
               polyEditor.add(testPolygon.points, ll);
             },
@@ -52,7 +51,7 @@ class _PolygonPageState extends State<PolygonPage> {
             TileLayer(
                 urlTemplate:
                     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-                subdomains: ['a', 'b', 'c']),
+                subdomains: const ['a', 'b', 'c']),
             PolygonLayer(polygons: polygons),
             DragMarkers(markers: polyEditor.edit()),
           ],

example/lib/polyline_page.dart

@@ -27,7 +27,10 @@ class _PolylinePageState extends State<PolylinePage> {
       points: testPolyline.points,
       pointIcon: const Icon(Icons.crop_square, size: 23),
       intermediateIcon: const Icon(Icons.lens, size: 15, color: Colors.grey),
-      callbackRefresh: () {print("polyedit setstate"); setState(() {} ); },
+      callbackRefresh: () {
+        debugPrint("polyedit setstate");
+        setState(() {});
+      },
     );
 
     polyLines.add(testPolyline);
@@ -40,7 +43,6 @@ class _PolylinePageState extends State<PolylinePage> {
       body: Center(
         child: FlutterMap(
           options: MapOptions(
-            absorbPanEventsOnScrollables: false,
             onTap: (_, ll) {
               polyEditor.add(testPolyline.points, ll);
             },
@@ -51,10 +53,9 @@ class _PolylinePageState extends State<PolylinePage> {
             TileLayer(
                 urlTemplate:
                     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-                subdomains: ['a', 'b', 'c']),
+                subdomains: const ['a', 'b', 'c']),
             PolylineLayer(polylines: polyLines),
-            DragMarkers(markers:  polyEditor.edit()),
-
+            DragMarkers(markers: polyEditor.edit()),
           ],
         ),
       ),

example/pubspec.yaml

@@ -4,12 +4,13 @@ publish_to: 'none'
 version: 4.0.2
 
 environment:
-  sdk: ">=2.12.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
+  flutter: ">=3.3.0"
 
 dependencies:
   flutter:
     sdk: flutter
-  flutter_map: ^3.0.0
+  flutter_map: ^4.0.0
   flutter_map_line_editor:
     path: ../
   latlong2: ">=0.8.0 <0.9.0"

lib/dragmarker.dart

@@ -6,7 +6,7 @@ import 'package:flutter_map/plugin_api.dart';
 class DragMarkers extends StatefulWidget {
   final List<DragMarker> markers;
 
-  DragMarkers({Key? key, this.markers = const []});
+  const DragMarkers({super.key, this.markers = const []});
 
   @override
   State<DragMarkers> createState() => _DragMarkersState();
@@ -27,9 +27,7 @@ class _DragMarkersState extends State<DragMarkers> {
     for (var marker in widget.markers) {
       if (!_boundsContainsMarker(mapState, marker)) continue;
 
-      dragMarkers.add(DragMarkerWidget(
-          mapState: mapState,
-          marker: marker));
+      dragMarkers.add(DragMarkerWidget(mapState: mapState, marker: marker));
     }
     return Stack(children: dragMarkers);
   }
@@ -49,11 +47,8 @@ class _DragMarkersState extends State<DragMarkers> {
 
 class DragMarkerWidget extends StatefulWidget {
   const DragMarkerWidget(
-      {Key? key,
-        this.mapState,
-        required this.marker,
-        AnchorPos? anchorPos})
-  //: anchor = Anchor.forPos(anchorPos, marker.width, marker.height);
+      {Key? key, this.mapState, required this.marker, AnchorPos? anchorPos})
+      //: anchor = Anchor.forPos(anchorPos, marker.width, marker.height);
       : super(key: key);
 
   final FlutterMapState? mapState;
@@ -89,9 +84,12 @@ class _DragMarkerWidgetState extends State<DragMarkerWidget> {
         : marker.builder!(context);
 
     return GestureDetector(
-      onPanStart: marker.useLongPress ? null : onPanStart,
-      onPanUpdate: marker.useLongPress ? null : onPanUpdate,
-      onPanEnd: marker.useLongPress ? null : onPanEnd,
+      onHorizontalDragStart: marker.useLongPress ? null : onPanStart,
+      onHorizontalDragUpdate: marker.useLongPress ? null : onPanUpdate,
+      onHorizontalDragEnd: marker.useLongPress ? null : onPanEnd,
+      onVerticalDragStart: marker.useLongPress ? null : onPanStart,
+      onVerticalDragUpdate: marker.useLongPress ? null : onPanUpdate,
+      onVerticalDragEnd: marker.useLongPress ? null : onPanEnd,
       onLongPressStart: marker.useLongPress ? onLongPanStart : null,
       onLongPressMoveUpdate: marker.useLongPress ? onLongPanUpdate : null,
       onLongPressEnd: marker.useLongPress ? onLongPanEnd : null,
@@ -115,7 +113,7 @@ class _DragMarkerWidgetState extends State<DragMarkerWidget> {
                 ((isDragging) ? marker.feedbackOffset.dy : marker.offset.dy),
             child: widget.marker.rotateMarker
                 ? Transform.rotate(
-                angle: -widget.mapState!.rotationRad, child: displayMarker)
+                    angle: -widget.mapState!.rotationRad, child: displayMarker)
                 : displayMarker)
       ]),
     );
@@ -169,7 +167,8 @@ class _DragMarkerWidgetState extends State<DragMarkerWidget> {
     var deltaLat = dragPos.latitude - dragPosStart.latitude;
     var deltaLon = dragPos.longitude - dragPosStart.longitude;
 
-    var pixelB = mapState?.getPixelBounds(mapState.zoom);    //getLastPixelBounds();
+    var pixelB =
+        mapState?.getPixelBounds(mapState.zoom); //getLastPixelBounds();
     var pixelPoint = mapState?.project(widget.marker.point);
 
     /// If we're near an edge, move the map to compensate.
@@ -204,23 +203,23 @@ class _DragMarkerWidgetState extends State<DragMarkerWidget> {
             (isDragging == true)) {
           autoDragTimer =
               Timer.periodic(const Duration(milliseconds: 10), (Timer t) {
-                var tick = autoDragTimer?.tick;
-                bool tickCheck = false;
-                if (tick != null) {
-                  if (tick > lastTick + 15) {
-                    tickCheck = true;
-                  }
-                }
-                if (isDragging == false || tickCheck) {
-                  autoDragTimer?.cancel();
-                } else {
-                  /// Note, we may have adjusted a few lines up in same drag,
-                  /// so could test for whether we've just done that
-                  /// this, but in reality it seems to work ok as is.
-
-                  adjustMapToMarker(widget, autoOffsetX, autoOffsetY);
-                }
-              });
+            var tick = autoDragTimer?.tick;
+            bool tickCheck = false;
+            if (tick != null) {
+              if (tick > lastTick + 15) {
+                tickCheck = true;
+              }
+            }
+            if (isDragging == false || tickCheck) {
+              autoDragTimer?.cancel();
+            } else {
+              /// Note, we may have adjusted a few lines up in same drag,
+              /// so could test for whether we've just done that
+              /// this, but in reality it seems to work ok as is.
+
+              adjustMapToMarker(widget, autoOffsetX, autoOffsetY);
+            }
+          });
         }
       }
     }
@@ -304,7 +303,7 @@ class _DragMarkerWidgetState extends State<DragMarkerWidget> {
     // convert the point to global coordinates
     var localPoint = _offsetToPoint(offset);
     var localPointCenterDistance =
-    CustomPoint((width / 2) - localPoint.x, (height / 2) - localPoint.y);
+        CustomPoint((width / 2) - localPoint.x, (height / 2) - localPoint.y);
     if (mapState != null) {
       var mapCenter = mapState.project(mapState.center);
       var point = mapCenter - localPointCenterDistance;
@@ -362,4 +361,4 @@ class DragMarker {
   }) {
     anchor = Anchor.forPos(anchorPos, width, height);
   }
-}
+}

lib/polyeditor.dart

@@ -62,7 +62,6 @@ class PolyEditor {
           }));
     }
 
-
     for (var c = 0; c < points.length - 1; c++) {
       var polyPoint = points[c];
       var polyPoint2 = points[c + 1];

pubspec.yaml

@@ -4,13 +4,14 @@ version: 4.0.2
 repository: https://github.com/ibrierley/flutter_map_line_editor
 
 environment:
-  sdk: ">=2.12.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
+  flutter: ">=3.3.0"
 
 dependencies:
   flutter:
     sdk: flutter
 
-  flutter_map: ^3.0.0
+  flutter_map: ">=3.0.0 <5.0.0"
   latlong2: ">=0.8.0 <0.9.0"
 
 dev_dependencies: