flutter_map_polygon_editor 0.1.2
flutter_map_polygon_editor: ^0.1.2 copied to clipboard
Polygon and polyline editor for Flutter Map with drag markers and customizable styling.
Flutter Map Polygon Editor #
A polygon and polyline editor for Flutter Map applications. This package provides interactive editing functionality that allows users to create, edit, and manipulate polygons and polylines directly on maps.
Demo #
Polygon Editing #
Polyline Editing #
Installation #
Add this to your package's pubspec.yaml
file:
dependencies:
flutter_map_polygon_editor: ^1.0.0
flutter_map: ^8.1.1
latlong2: ^0.9.1
Then run:
flutter pub get
Quick Start #
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_polygon_editor/polygon_editor.dart';
import 'package:latlong2/latlong.dart';
class MapWithEditor extends StatefulWidget {
@override
_MapWithEditorState createState() => _MapWithEditorState();
}
class _MapWithEditorState extends State<MapWithEditor> {
late final PolygonEditorController _controller;
@override
void initState() {
super.initState();
_controller = PolygonEditorController();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: FlutterMap(
options: MapOptions(
initialCenter: const LatLng(51.5074, -0.1278),
initialZoom: 10,
onLongPress: (tapPosition, point) {
_controller.addPoint(point);
},
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
),
PolygonEditor(
controller: _controller,
style: PolygonEditorStyle(
borderColor: Colors.blue,
fillColor: Colors.blue.withOpacity(0.3),
),
),
],
),
);
}
}
Usage #
Basic Setup #
- Create a controller:
final controller = PolygonEditorController();
- Add the editor to your map:
PolygonEditor(
controller: controller,
)
- Don't forget to dispose:
@override
void dispose() {
controller.dispose();
super.dispose();
}
Controller Operations #
// Add points programmatically
controller.addPoint(LatLng(51.5074, -0.1278));
// Switch between modes
controller.setMode(PolygonEditorMode.line);
controller.setMode(PolygonEditorMode.polygon);
// Get current points
List<LatLng> points = controller.points;
// Clear all points
controller.clear();
// Listen to changes
controller.addListener(() {
print('Points changed: ${controller.points.length}');
});
Customization #
Custom Styling
PolygonEditor(
controller: controller,
style: PolygonEditorStyle(
borderWidth: 3.0,
borderColor: Colors.red,
fillColor: Colors.red.withOpacity(0.2),
),
)
Custom Markers
PolygonEditor(
controller: controller,
pointBuilder: (context, position, isDragging) {
return Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: isDragging ? Colors.red : Colors.blue,
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 2),
),
);
},
midpointBuilder: (context, position, isDragging) {
return Container(
width: 16,
height: 16,
decoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
child: Icon(Icons.add, size: 12, color: Colors.white),
);
},
)
Performance Tuning
PolygonEditor(
controller: controller,
throttleDuration: Duration(milliseconds: 16), // 60 FPS
// Or disable throttling for maximum responsiveness
throttleDuration: Duration.zero,
)
User Interactions #
- Long press map: Add new point
- Drag point: Move existing point
- Long press point: Remove point
- Drag midpoint: Create new point at that position
API Reference #
PolygonEditorController #
Method | Description |
---|---|
addPoint(LatLng point) |
Adds a point to the end of the list |
insertPoint(int index, LatLng point) |
Inserts a point at the specified index |
updatePoint(int index, LatLng point) |
Updates an existing point |
removePoint(int index) |
Removes a point by index |
removeLast() |
Removes and returns the last point |
clear() |
Removes all points |
setPoints(List<LatLng> points) |
Replaces all points |
setMode(PolygonEditorMode mode) |
Switches between polygon and line modes |
PolygonEditorStyle #
Property | Type | Default | Description |
---|---|---|---|
borderWidth |
double |
2.0 |
Width of the border stroke |
borderColor |
Color |
Colors.red |
Color of the border |
fillColor |
Color |
Semi-transparent red | Fill color for polygons |
Contributing #
Contributions are welcome! Please feel free to submit a Pull Request.
License #
This project is licensed under the MIT License - see the LICENSE file for details.