-
-
Save josehenriqueroveda/a7be466fa6ae06e526ee29cf02db7676 to your computer and use it in GitHub Desktop.
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))) | |
], | |
), | |
) | |
], | |
)); | |
} | |
} |
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), | |
), | |
], | |
)), | |
), | |
); | |
} | |
} |
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 includinggoomap.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 )
where do you define the shapes