diff --git a/README.md b/README.md index cf1767c..02f90bf 100644 --- a/README.md +++ b/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), diff --git a/example/lib/list_page.dart b/example/lib/list_page.dart new file mode 100644 index 0000000..fb4ef3a --- /dev/null +++ b/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 createState() => _ListPageState(); +} + +class _ListPageState extends State { + late PolyEditor polyEditor; + + List 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(); + }); + }, + ), + ); + } +} diff --git a/example/lib/main.dart b/example/lib/main.dart index ec7ce80..902263d 100644 --- a/example/lib/main.dart +++ b/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 { children: const [ PolylinePage(), PolygonPage(), + ListPage(), ], ), bottomNavigationBar: BottomNavigationBar( @@ -40,7 +42,11 @@ class _AppState extends State { BottomNavigationBarItem( icon: Icon(Icons.dashboard_outlined), label: 'Polygon', - ) + ), + BottomNavigationBarItem( + icon: Icon(Icons.list), + label: 'List', + ), ], ), ), diff --git a/example/lib/polygon_page.dart b/example/lib/polygon_page.dart index dd920c8..fb57814 100644 --- a/example/lib/polygon_page.dart +++ b/example/lib/polygon_page.dart @@ -16,7 +16,8 @@ class _PolygonPageState extends State { late PolyEditor polyEditor; List 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 { 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 { 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()), ], diff --git a/example/lib/polyline_page.dart b/example/lib/polyline_page.dart index 775fa05..46acfb3 100644 --- a/example/lib/polyline_page.dart +++ b/example/lib/polyline_page.dart @@ -27,7 +27,10 @@ class _PolylinePageState extends State { 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 { body: Center( child: FlutterMap( options: MapOptions( - absorbPanEventsOnScrollables: false, onTap: (_, ll) { polyEditor.add(testPolyline.points, ll); }, @@ -51,10 +53,9 @@ class _PolylinePageState extends State { 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()), ], ), ), diff --git a/example/pubspec.yaml b/example/pubspec.yaml index d774ccf..aa7edab 100644 --- a/example/pubspec.yaml +++ b/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" diff --git a/lib/dragmarker.dart b/lib/dragmarker.dart index 7b4bc86..ae3af16 100644 --- a/lib/dragmarker.dart +++ b/lib/dragmarker.dart @@ -6,7 +6,7 @@ import 'package:flutter_map/plugin_api.dart'; class DragMarkers extends StatefulWidget { final List markers; - DragMarkers({Key? key, this.markers = const []}); + const DragMarkers({super.key, this.markers = const []}); @override State createState() => _DragMarkersState(); @@ -27,9 +27,7 @@ class _DragMarkersState extends State { 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 { 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 { : 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 { ((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 { 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 { (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 { // 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); } -} \ No newline at end of file +} diff --git a/lib/polyeditor.dart b/lib/polyeditor.dart index 3d7329e..bdc4e8a 100644 --- a/lib/polyeditor.dart +++ b/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]; diff --git a/pubspec.yaml b/pubspec.yaml index ff425e3..8089bb3 100644 --- a/pubspec.yaml +++ b/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: