-
-
Save josehenriqueroveda/a7be466fa6ae06e526ee29cf02db7676 to your computer and use it in GitHub Desktop.
HomePage for Maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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))) | |
], | |
), | |
) | |
], | |
)); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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), | |
), | |
], | |
)), | |
), | |
); | |
} | |
} |
OkomoJacob
commented
Mar 14, 2022
•
- @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 )
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment