CODEWITHSUNDEEP
flutterfluttermap
Navid Hosseini
Navid Hosseini

Reputation: 144

free hand drawing polyline flutter

I want to draw the polyline on the map base on GIF that has been sent to you and also I want the map to return coordinates during my drawing so I can use... in fact if I could receive the coordinates from the function onPanUpdate from the widget gestureDetector my problem would be solved.

Thanks!

Upvotes: 0

Views: 680

Answers (1)

Navid Hosseini
Navid Hosseini

Reputation: 144

Wrap GoogleMap widget inside GestureDetector and set the important attributes to it

GestureDetector(
 onPanUpdate: (_drawPolygonEnabled) ? _onPanUpdate : null,
 onPanEnd: (_drawPolygonEnabled) ? _onPanEnd : null,
 child: GoogleMap(
 mapType: MapType.normal,
 initialCameraPosition: _kGooglePlex,
 polygons: _polygons,
 polylines: _polyLines,
 onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
},
),
),

Floating Action Button to manage the activate/deactivate the drawing

FloatingActionButton(
onPressed: _toggleDrawing,
tooltip: 'Drawing',
child: Icon((_drawPolygonEnabled) ? Icons.cancel : Icons.edit),
),

Toggle button function

_toggleDrawing() {
_clearPolygons();
 setState(() => _drawPolygonEnabled = !_drawPolygonEnabled);
 }

GestureDetector onPanUpdate function

_onPanUpdate(DragUpdateDetails details) async {
 // To start draw new polygon every time.
 if (_clearDrawing) {
_clearDrawing = false;
_clearPolygons();
 }

if (_drawPolygonEnabled) {
double x, y;
if (Platform.isAndroid) {
  // It times in 3 without any meaning,
  // We think it's an issue with GoogleMaps package.
  x = details.globalPosition.dx * 3;
  y = details.globalPosition.dy * 3;
 } else if (Platform.isIOS) {
  x = details.globalPosition.dx;
  y = details.globalPosition.dy;
  }

// Round the x and y.
int xCoordinate = x.round();
int yCoordinate = y.round();

// Check if the distance between last point is not too far.
// to prevent two fingers drawing.
 if (_lastXCoordinate != null && _lastYCoordinate != null) {
  var distance = Math.sqrt(Math.pow(xCoordinate - _lastXCoordinate,
 2) + Math.pow(yCoordinate - _lastYCoordinate, 2));
  // Check if the distance of point and point is large.
  if (distance > 80.0) return;
}

// Cached the coordinate.
_lastXCoordinate = xCoordinate;
_lastYCoordinate = yCoordinate;

ScreenCoordinate screenCoordinate = ScreenCoordinate(x: xCoordinate, y: yCoordinate);

final GoogleMapController controller = await _controller.future;
LatLng latLng = await controller.getLatLng(screenCoordinate);

try {
  // Add new point to list.
  _userPolyLinesLatLngList.add(latLng);

  _polyLines.removeWhere((polyline) => polyline.polylineId.value ==   'user_polyline');
  _polyLines.add(
    Polyline(
      polylineId: PolylineId('user_polyline'),
      points: _userPolyLinesLatLngList,
      width: 2,
      color: Colors.blue,
    ),
  );
} catch (e) {
  print(" error painting $e");
}
setState(() {});
 }
}

GestureDetector onPanEnd function

_onPanEnd(DragEndDetails details) async {
// Reset last cached coordinate
_lastXCoordinate = null;
_lastYCoordinate = null;
if (_drawPolygonEnabled) {
_polygons.removeWhere((polygon) => polygon.polygonId.value 
 =='user_polygon');
_polygons.add(
  Polygon(
    polygonId: PolygonId('user_polygon'),
    points: _userPolyLinesLatLngList,
    strokeWidth: 2,
    strokeColor: Colors.blue,
    fillColor: Colors.blue.withOpacity(0.4),
   ),
  );
  setState(() {
  _clearDrawing = true;
  });
 }
}

Clear polygon and polylines function

_clearPolygons() {
 setState(() {
_polyLines.clear();
_polygons.clear();
_userPolyLinesLatLngList.clear();
 });
}

Thanks to Shady Boshra,

source Free Hand Polygon Drawing on Google Maps

Upvotes: 0

Related Questions