HomePage for Maps

goomap.dart

import 'dart:collection';
import 'package:flutter/cupertino.dart';
import 'package:location/location.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GooMap extends StatefulWidget {
  //GooMap({Key key}) : super(key: key);

  final LocationData location;
  GooMap({this.location});

  @override
  _GooMapState createState() => _GooMapState();
}

class _GooMapState extends State<GooMap> {
  // Location
  LocationData _locationData;

  // Maps
  Set<Marker> _markers = HashSet<Marker>();
  Set<Polygon> _polygons = HashSet<Polygon>();
  Set<Circle> _circles = HashSet<Circle>();
  GoogleMapController _googleMapController;
  BitmapDescriptor _markerIcon;
  List<LatLng> polygonLatLngs = List<LatLng>();
  double radius;

  //ids
  int _polygonIdCounter = 1;
  int _circleIdCounter = 1;
  int _markerIdCounter = 1;

  // Type controllers
  bool _isPolygon = true; //Default
  bool _isMarker = false;
  bool _isCircle = false;

  @override
  void initState() {
    super.initState();
    // If I want to change the marker icon:
    // _setMarkerIcon();
    _locationData = widget.location;
  }

  // This function is to change the marker icon
  void _setMarkerIcon() async {
    _markerIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(), 'assets/farm.png');
  }

  // Draw Polygon to the map
  void _setPolygon() {
    final String polygonIdVal = 'polygon_id_$_polygonIdCounter';
    _polygons.add(Polygon(
      polygonId: PolygonId(polygonIdVal),
      points: polygonLatLngs,
      strokeWidth: 2,
      strokeColor: Colors.yellow,
      fillColor: Colors.yellow.withOpacity(0.15),
    ));
  }

  // Set circles as points to the map
  void _setCircles(LatLng point) {
    final String circleIdVal = 'circle_id_$_circleIdCounter';
    _circleIdCounter++;
    print(
        'Circle | Latitude: ${point.latitude}  Longitude: ${point.longitude}  Radius: $radius');
    _circles.add(Circle(
        circleId: CircleId(circleIdVal),
        center: point,
        radius: radius,
        fillColor: Colors.redAccent.withOpacity(0.5),
        strokeWidth: 3,
        strokeColor: Colors.redAccent));
  }

  // Set Markers to the map
  void _setMarkers(LatLng point) {
    final String markerIdVal = 'marker_id_$_markerIdCounter';
    _markerIdCounter++;
    setState(() {
      print(
          'Marker | Latitude: ${point.latitude}  Longitude: ${point.longitude}');
      _markers.add(
        Marker(
          markerId: MarkerId(markerIdVal),
          position: point,
        ),
      );
    });
  }

  // Start the map with this marker setted up
  void _onMapCreated(GoogleMapController controller) {
    _googleMapController = controller;

    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId('0'),
          position: LatLng(-20.131886, -47.484488),
          infoWindow:
              InfoWindow(title: 'Roça', snippet: 'Um bom lugar para estar'),
          //icon: _markerIcon,
        ),
      );
    });
  }

  Widget _fabPolygon() {
    return FloatingActionButton.extended(
      onPressed: () {
        //Remove the last point setted at the polygon
        setState(() {
          polygonLatLngs.removeLast();
        });
      },
      icon: Icon(Icons.undo),
      label: Text('Undo point'),
      backgroundColor: Colors.orange,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Studying Maps - Zeh'),
          centerTitle: true,
          backgroundColor: Colors.grey[900],
        ),
        floatingActionButton:
            polygonLatLngs.length > 0 && _isPolygon ? _fabPolygon() : null,
        body: Stack(
          children: <Widget>[
            GoogleMap(
              initialCameraPosition: CameraPosition(
                target: LatLng(_locationData.latitude, _locationData.longitude),
                zoom: 16,
              ),
              mapType: MapType.hybrid,
              markers: _markers,
              circles: _circles,
              polygons: _polygons,
              myLocationEnabled: true,
              onTap: (point) {
                if (_isPolygon) {
                  setState(() {
                    polygonLatLngs.add(point);
                    _setPolygon();
                  });
                } else if (_isMarker) {
                  setState(() {
                    _markers.clear();
                    _setMarkers(point);
                  });
                } else if (_isCircle) {
                  setState(() {
                    _circles.clear();
                    _setCircles(point);
                  });
                }
              },
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                children: <Widget>[
                  RaisedButton(
                      color: Colors.black54,
                      onPressed: () {
                        _isPolygon = true;
                        _isMarker = false;
                        _isCircle = false;
                      },
                      child: Text(
                        'Polygon',
                        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
                      )),
                  RaisedButton(
                      color: Colors.black54,
                      onPressed: () {
                        _isPolygon = false;
                        _isMarker = true;
                        _isCircle = false;
                      },
                      child: Text('Marker',
                          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white))),
                  RaisedButton(
                      color: Colors.black54,
                      onPressed: () {
                        _isPolygon = false;
                        _isMarker = false;
                        _isCircle = true;
                        radius = 50;
                        return showDialog(
                            context: context,
                            child: AlertDialog(
                              backgroundColor: Colors.grey[900],
                              title: Text(
                                'Choose the radius (m)',
                                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
                              ),
                              content: Padding(
                                  padding: EdgeInsets.all(8),
                                  child: Material(
                                    color: Colors.black,
                                    child: TextField(
                                      style: TextStyle(fontSize: 16, color: Colors.white),
                                      decoration: InputDecoration(
                                        icon: Icon(Icons.zoom_out_map),
                                        hintText: 'Ex: 100',
                                        suffixText: 'meters',
                                      ),
                                      keyboardType:
                                          TextInputType.numberWithOptions(),
                                      onChanged: (input) {
                                        setState(() {
                                          radius = double.parse(input);
                                        });
                                      },
                                    ),
                                  )),
                              actions: <Widget>[
                                FlatButton(
                                    onPressed: () => Navigator.pop(context),
                                    child: Text(
                                      'Ok',
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,),
                                    )),
                              ],
                            ));
                      },
                      child: Text('Circle',
                          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white)))
                ],
              ),
            )
          ],
        ));
  }
}

home.dart

import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:maps/pages/goomap.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Location location = new Location();
  bool _serviceEnabled;
  PermissionStatus _permissionGranted;
  LocationData _locationData;

  @override
  void initState() {
    super.initState();
    _checkLocationPermission();
  }

  // Check Location Permissions, and get my location
  void _checkLocationPermission() async {
    _serviceEnabled = await location.serviceEnabled();
    if (!_serviceEnabled) {
      _serviceEnabled = await location.requestService();
      if (!_serviceEnabled) {
        return;
      }
    }
    _permissionGranted = await location.hasPermission();
    if (_permissionGranted == PermissionStatus.denied) {
      _permissionGranted = await location.requestPermission();
      if (_permissionGranted != PermissionStatus.granted) {
        return;
      }
    }
    _locationData = await location.getLocation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      appBar: AppBar(
        title: Text('Studyng Maps - Zeh'),
        centerTitle: true,
        backgroundColor: Colors.grey[900], 
      ),
      floatingActionButton: FloatingActionButton.extended(
          onPressed: () => _locationData != null ? Navigator.push(
              context, MaterialPageRoute(builder: (context) => GooMap(location: _locationData,))) : null,
          backgroundColor: Colors.orange,
          label: Row(
            children: <Widget>[
              Text(
                'Open Maps',
                style: TextStyle(color: Colors.black87),
              ),
              Icon(
                Icons.map,
                color: Colors.black87,
              ),
            ],
          )),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Study of google maps - Zeh',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
            ),
            SizedBox(height: 20),
            Text(
              'App to study some features of google maps: Testing markers, polygons, polylines and circles',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 16, color: Colors.white),
            ),
          ],
        )),
      ),
    );
  }
}

where do you define the shapes

lib/goomap.dart:23:7: Error: Type 'Polygon' not found.
Set _polygons = HashSet();
^^^^^^^
lib/goomap.dart:24:7: Error: Type 'Circle' not found.
Set _circles = HashSet();
^^^^^^
lib/goomap.dart:23:7: Error: 'Polygon' isn't a type.
Set _polygons = HashSet();
^^^^^^^
lib/goomap.dart:23:36: Error: 'Polygon' isn't a type.
Set _polygons = HashSet();
^^^^^^^
lib/goomap.dart:24:7: Error: 'Circle' isn't a type.
Set _circles = HashSet();
^^^^^^
lib/goomap.dart:24:34: Error: 'Circle' isn't a type.
Set _circles = HashSet();
^^^^^^
lib/goomap.dart:50:42: Error: Method not found: 'BitmapDescriptor.fromAssetImage'.
_markerIcon = await BitmapDescriptor.fromAssetImage(
^^^^^^^^^^^^^^
lib/goomap.dart:57:19: Error: The method 'Polygon' isn't defined for the class '_GooMapState'.

• '_GooMapState' is from 'package:chottapp_customer/goomap.dart' ('lib/goomap.dart').
  Try correcting the name to the name of an existing method, or defining a method named 'Polygon'.
  _polygons.add(Polygon(
  ^^^^^^^
  lib/goomap.dart:58:18: Error: The method 'PolygonId' isn't defined for the class '_GooMapState'.
• '_GooMapState' is from 'package:chottapp_customer/goomap.dart' ('lib/goomap.dart').
  Try correcting the name to the name of an existing method, or defining a method named 'PolygonId'.
  polygonId: PolygonId(polygonIdVal),
  ^^^^^^^^^
  lib/goomap.dart:72:18: Error: The method 'Circle' isn't defined for the class '_GooMapState'.
• '_GooMapState' is from 'package:chottapp_customer/goomap.dart' ('lib/goomap.dart').
  Try correcting the name to the name of an existing method, or defining a method named 'Circle'.
  _circles.add(Circle(
  ^^^^^^
  lib/goomap.dart:73:19: Error: The method 'CircleId' isn't defined for the class '_GooMapState'.
• '_GooMapState' is from 'package:chottapp_customer/goomap.dart' ('lib/goomap.dart').
  Try correcting the name to the name of an existing method, or defining a method named 'CircleId'.
  circleId: CircleId(circleIdVal),
  ^^^^^^^^
  lib/goomap.dart:147:15: Error: No named parameter with the name 'circles'.
  circles: _circles,
  ^^^^^^^
  ../../../snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/google_maps_flutter-0.4.0/lib/src/google_map.dart:18:9: Context: Found this candidate, but the arguments don't match.
  const GoogleMap({
  ^^^^^^^^^
  I am getting this error

• @josehenriqueroveda Thank you for such an awesome material 👏 👏 .It worked for me just well.
• [1] One quick question, can you suggest a way of drawing multiple polygons in the map. If I complete the first one, then try drawing another one, it continues to draw the initial one since there's no way to complete the first one, It joins the two.
• [2] Can you suggest how to work with polylines as well?
• Kindly help thank you ❤️

• @frankMagoba I went through this and it woks just fine for me, even though not directly.
• You'll need to have your main.dart file where you define the root of your application, from which you'll need to import your dependency files including goomap.dart etc.

can you suggest a way of drawing multiple polygons in the map. If I complete the first one, then try drawing another one, it continues to draw the initial one since there's no way to complete the first one, It joins the two.

• I also had the same issue with this package, and I'm still stuck at that, up to the time of writing tis comment. @josehenriqueroveda.
• @Super-powerful-demon-mutant-zombie , If you find a way out through it, kindly share.
  Thanks

@josehenriqueroveda. I was able to solve it by following this youtube video. It's in Spanish but just follow the code. Hope this helps! Cheers ( https://www.youtube.com/watch?v=O6Cy0Vtpv9M )