I'm trying to draw closed contours on an OSM using the GestureDetector with flutter_map package. This is easily done on a plain background, as shown here. But when I try to use the same solution with OSM as a background, it doesn't work. Here is my example:
GestureDetector sketchArea() {
return GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
RenderBox? box = context.findRenderObject() as RenderBox?;
Offset point = box!.globalToLocal(details.globalPosition);
setState(() {
points = (List.from(points)..add(point));
});
},
onPanEnd: (DragEndDetails details) {
points.add(null);
},
child: RepaintBoundary(
child: CustomPaint(
painter: Sketcher(points),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Color(0xFF0E3311).withOpacity(0.5),
child: Column (children: [
Expanded(
child: FlutterMap(
mapController: _mapController,
options: MapOptions(
center: LatLng(41.238250, 69.342939),
zoom: 4,),
children: [
TileLayer(
urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
userAgentPackageName: 'com.example.app',
),
...
)));
}
}
In my Sketcher, I have exactly the same as in the source code:
import 'package:flutter/material.dart';
class Sketcher extends CustomPainter {
//list of points which are to be painted
final List<Offset?> points;
Sketcher(this.points);
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.blue
..strokeCap = StrokeCap.round
..strokeWidth = 5.0;
for (int i = 0; i < points.length - 1; ++i) {
if (points[i] == null) continue;
if (points[i + 1] != null) {
canvas.drawLine(points[i]!, points[i + 1]!, paint);
}
}
}
@override
bool shouldRepaint(Sketcher oldDelegate) {
return oldDelegate.points != points;
}
}
After the contour is created, I'm going to filter the coordinates of the points located inside it and pass them to the backend. Right now I'm doing this by building a polygon, but I want to do the same with an arbitrary closed contour.
I will appreciate any help.