main.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  MapController controller = MapController();
  bool _drawPolygonEnabled = false;
  final List<LatLng> _userPolyLinesLatLngList = [];
  late LatLng? firstLatLng;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Map Nurulloh'),
      ),
      body: FlutterMap(
        mapController: controller,
        nonRotatedChildren: [
          GestureDetector(
            onPanUpdate: (details) {
              var p = details.localPosition;
              int xCoordinate = p.dx.round();
              int yCoordinate = p.dy.round();
              _userPolyLinesLatLngList.add(
                controller.pointToLatLng(CustomPoint(xCoordinate, yCoordinate)),
              );
              setState(() {});
            },
          ),
        ],
        options: MapOptions(
          center: const LatLng(37.42796133580664, -122.085749655962),
          onPointerDown: (event, point) {
            _userPolyLinesLatLngList.clear();
            _userPolyLinesLatLngList.add(point);
            firstLatLng = point;
            setState(() {});
          },
          onPointerUp: (event, point) {
            _userPolyLinesLatLngList.add(point);
            if (firstLatLng != null) {
              _userPolyLinesLatLngList.add(firstLatLng!);
            }
            firstLatLng = null;
            setState(() {});
          },
          interactiveFlags:
              _drawPolygonEnabled ? InteractiveFlag.none : InteractiveFlag.all,
          zoom: 14.4746,
        ),
        children: [
          TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
            backgroundColor: Colors.transparent,
          ),
          PolylineLayer(
            polylines: [
              Polyline(
                color: Colors.blue,
                borderStrokeWidth: 3,
                strokeWidth: 3,
                borderColor: Colors.white,
                points: _userPolyLinesLatLngList,
              )
            ],
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleDrawing,
        tooltip: 'Drawing',
        child: Icon((_drawPolygonEnabled) ? Icons.cancel : Icons.edit),
      ),
    );
  }

  // _onPanUpdate(DragUpdateDetails details) async {
  //   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(() {});
  //   }
  // }

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

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