Last active
April 1, 2021 07:36
-
-
Save mulieriq/f6205ac66291a296729bb680bb5c7a6d to your computer and use it in GitHub Desktop.
Maps suggestions /Maps search within a given radius
This file contains hidden or 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
/////////////////////////////////////////////////////////////////////EXTRACTED SHORT SNIPPETS Garage Idea from properties snippet //////////////////////////////// | |
//////////////////////////////////////////////MAPS SCREEN | |
////Suggests garages within a given radius from users loactions | |
List gdata = []; | |
List searchedGarage = []; | |
///In this block i receive my data from fireabse garage collections then regeneate a list containig my garage ,then i | |
//their ids within each garage's MAP ( | |
void initState() { | |
widget.model.garageData.documents.forEach((element) { | |
dynamic m = element.data; | |
m.addAll({"garage_Id": element.documentID}); | |
gdata.add(m); | |
}); | |
} | |
///////////This functions receives distance in kilometers then tragulate's garage within the input radius | |
filterMakers<Void>(dist) { | |
for (int i = 0; i < pdata.length; i++) { | |
Geolocator() | |
.distanceBetween(user_location.lat, user_locations.long, | |
gdata[i]['map_cordinates'][0], gdata[i]['map_cordinates'][1]) | |
.then((cdist) => { | |
if (cdist / 1000 < double.parse(dist)) | |
{placeFilteredMarker(gdata[i], cdist / 1000)} | |
}); | |
} | |
} | |
///////This functions receives the data from filterMakers functions then generates new markers in the map | |
placeFilteredMarker(element, distance) { | |
_controller.clearMarkers(); | |
searchedGarage.add(element); /// this a list of all garage witin the given radius | |
setMapPins(many: true, element: element); | |
} | |
//////////////////////////////////////////////////////RENDERING THE MAP | |
...body: GoogleMap( | |
mapType: MapType.normal, | |
zoomGesturesEnabled: true, | |
myLocationEnabled: true, | |
compassEnabled: true, | |
scrollGesturesEnabled: true, | |
initialCameraPosition: CameraPosition( | |
target: LatLng(user_location.lat, user_location.long), | |
zoom: 8, | |
), | |
onMapCreated: onMapCreated), | |
//////////////////////////////////////////////////////////////////////////////////////FULL CODE IMPLEMENTATION/////////////////////////// | |
class PropertyMap extends StatefulWidget { | |
final String propName; | |
final String price; | |
final String deposit; | |
final Scoped model; | |
final String adminArea; | |
final String locality; | |
final String imgUrl; | |
final double lat; | |
final double long; | |
PropertyMap( | |
{this.lat, | |
this.long, | |
this.adminArea, | |
this.imgUrl, | |
this.locality, | |
this.model, | |
this.deposit, | |
this.price, | |
this.propName}); | |
@override | |
_PropertyMapState createState() => _PropertyMapState(); | |
} | |
class _PropertyMapState extends State<PropertyMap> { | |
GoogleMapController _controller; | |
List<Marker> markers = []; | |
List pdata = []; | |
List searchedProps = []; | |
BitmapDescriptor sourceIcon; | |
PageController _pageController; | |
int prevPage; | |
reqPermission() async { | |
var permissions = await Permission.getPermissionsStatus( | |
[PermissionName.Location, PermissionName.Internet]); | |
if (permissions[0].permissionStatus == PermissionStatus.notAgain) { | |
await Permission.requestPermissions([PermissionName.Location]); | |
} else { | |
await Permission.requestPermissions([PermissionName.Location]); | |
} | |
} | |
void setMapPins({bool many, element}) { | |
setState(() { | |
// source pin | |
if (many) { | |
_controller.addMarker(MarkerOptions( | |
draggable: false, | |
// markerId: MarkerId(element['property_name']), | |
position: LatLng( | |
element['map_cordinates'][0], element['map_cordinates'][1]), | |
infoWindowText: InfoWindowText(element["property_name"], ""), | |
icon: sourceIcon)); | |
} else { | |
_controller.addMarker(MarkerOptions( | |
draggable: false, | |
position: LatLng(widget.lat, widget.long), | |
infoWindowText: InfoWindowText(widget.propName, " "), | |
icon: sourceIcon)); | |
} | |
// }); | |
// destination pin | |
}); | |
} | |
filterMakers(dist) { | |
// pdata.forEach((element) { | |
for (int i = 0; i < pdata.length; i++) { | |
Geolocator() | |
.distanceBetween(widget.lat, widget.long, | |
pdata[i]['map_cordinates'][0], pdata[i]['map_cordinates'][1]) | |
.then((cdist) => { | |
if (cdist / 1000 < double.parse(dist)) | |
{placeFilteredMarker(pdata[i], cdist / 1000)} | |
}); | |
} | |
// }); | |
} | |
placeFilteredMarker(element, distance) { | |
_controller.clearMarkers(); | |
searchedProps.add(element); | |
setMapPins(many: true, element: element); | |
} | |
void onMapCreated(controller) { | |
setState(() { | |
_controller = controller; | |
}); | |
_controller.addMarker(MarkerOptions( | |
draggable: false, | |
position: LatLng(widget.lat, widget.long), | |
infoWindowText: InfoWindowText(widget.propName, " "), | |
icon: sourceIcon)); | |
} | |
@override | |
void initState() { | |
widget.model.propertiesData.documents.forEach((element) { | |
dynamic m = element.data; | |
m.addAll({"property_Id": element.documentID}); | |
pdata.add(m); | |
}); | |
super.initState(); | |
reqPermission(); | |
_pageController = PageController(initialPage: 1, viewportFraction: 0.8) | |
..addListener(_onScroll); | |
} | |
void _onScroll() { | |
if (_pageController.page.toInt() != prevPage) { | |
prevPage = _pageController.page.toInt(); | |
moveCamera( | |
lat: searchedProps[prevPage]['map_cordinates'][0], | |
long: searchedProps[prevPage]['map_cordinates'][1], | |
); | |
} | |
} | |
moveCamera({lat, long}) { | |
_controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition( | |
target: | |
lat == null ? LatLng(widget.lat, widget.long) : LatLng(lat, long), | |
zoom: 14.0, | |
bearing: 45.0, | |
tilt: 45.0))); | |
} | |
List mapDistances = [1, 3, 5, 9, 11, 20, 40, 50]; | |
bool radialSearch = false; | |
_coffeeShopList(index) { | |
return AnimatedBuilder( | |
animation: _pageController, | |
builder: (BuildContext context, Widget widget) { | |
double value = 1; | |
if (_pageController.position.haveDimensions) { | |
value = _pageController.page - index; | |
value = (1 - (value.abs() * 0.3) + 0.06).clamp(0.0, 1.0); | |
} | |
return Center( | |
child: SizedBox( | |
height: Curves.easeInOut.transform(value) * 125.0, | |
width: Curves.easeInOut.transform(value) * 350.0, | |
child: widget, | |
), | |
); | |
}, | |
child: InkWell( | |
onTap: () { | |
moveCamera( | |
lat: searchedProps[index]['map_cordinates'][0], | |
long: searchedProps[index]['map_cordinates'][1]); | |
}, | |
child: Stack(children: [ | |
Center( | |
child: Container( | |
margin: EdgeInsets.symmetric( | |
horizontal: 10.0, | |
vertical: 20.0, | |
), | |
height: MediaQuery.of(context).size.height * .125, | |
width: MediaQuery.of(context).size.width * .8, | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(10.0), | |
boxShadow: [ | |
BoxShadow( | |
color: Colors.black54, | |
offset: Offset(0.0, 4.0), | |
blurRadius: 10.0, | |
), | |
]), | |
child: Container( | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(10.0), | |
color: Colors.white), | |
child: Row(children: [ | |
Container( | |
height: MediaQuery.of(context).size.height * .125, | |
width: MediaQuery.of(context).size.height * .125, | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.only( | |
bottomLeft: Radius.circular(10.0), | |
topLeft: Radius.circular(10.0)), | |
image: DecorationImage( | |
image: CachedNetworkImageProvider( | |
searchedProps[index]['image_banner']), | |
fit: BoxFit.cover))), | |
SizedBox(width: 5.0), | |
Column( | |
mainAxisAlignment: MainAxisAlignment.spaceEvenly, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: [ | |
Text( | |
searchedProps[index]['property_name'], | |
style: TextStyle( | |
fontSize: 12.5, | |
fontWeight: FontWeight.bold), | |
), | |
Text( | |
searchedProps[index]['administrative_area'], | |
style: TextStyle( | |
fontSize: 12.0, | |
fontWeight: FontWeight.w600), | |
), | |
Text( | |
searchedProps[index]['locality'], | |
style: TextStyle( | |
fontSize: 11.0, | |
fontWeight: FontWeight.w300), | |
), | |
Container( | |
// width: 170.0, | |
child: Text( | |
"${searchedProps[index]['price']} Ksh", | |
style: TextStyle( | |
fontSize: 11.0, | |
fontWeight: FontWeight.w300), | |
), | |
) | |
]) | |
])))) | |
])), | |
); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return ScopedModelDescendant( | |
builder: (BuildContext context, Widget child, Scoped model) { | |
return Scaffold( | |
appBar: AppBar( | |
backgroundColor: Colors.white, | |
title: Text( | |
" Property Geolocation", | |
style: TextStyle(color: blackColor), | |
), | |
elevation: 0, | |
centerTitle: true, | |
actions: [ | |
radialSearch | |
? IconButton( | |
icon: Icon( | |
Icons.cancel, | |
color: Colors.black, | |
), | |
onPressed: () { | |
setState(() { | |
radialSearch = !radialSearch; | |
}); | |
}) | |
: Container() | |
], | |
), | |
body: Stack( | |
children: [ | |
GoogleMap( | |
mapType: MapType.normal, | |
zoomGesturesEnabled: true, | |
// zoomGesturesEnabled: true, | |
myLocationEnabled: true, | |
compassEnabled: true, | |
scrollGesturesEnabled: true, | |
initialCameraPosition: CameraPosition( | |
target: LatLng(widget.lat, widget.long), | |
zoom: 8, | |
), | |
// polylines: model.polyline, | |
onMapCreated: onMapCreated), | |
Positioned( | |
child: Container( | |
padding: EdgeInsets.all(8.0), | |
height: MediaQuery.of(context).size.height * .1, | |
child: radialSearch | |
? ListView( | |
scrollDirection: Axis.horizontal, | |
children: mapDistances | |
.map((e) => Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: RaisedButton( | |
key: Key("$e"), | |
color: Colors.blue, | |
shape: StadiumBorder(), | |
onPressed: () { | |
searchedProps.clear(); | |
filterMakers(e.toString()); | |
}, | |
child: CustomTextSmall( | |
color: Colors.white, text: "$e km")), | |
)) | |
.toList()) | |
: Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: RaisedButton( | |
key: Key("radialSearch"), | |
color: Colors.blue, | |
shape: StadiumBorder(), | |
onPressed: () { | |
setState(() { | |
radialSearch = !radialSearch; | |
}); | |
}, | |
child: CustomTextSmall( | |
color: Colors.white, | |
text: "Search By Distance Interval")), | |
), | |
)), | |
Positioned( | |
bottom: MediaQuery.of(context).size.height * .06, | |
child: Container( | |
height: MediaQuery.of(context).size.height * .2, | |
width: MediaQuery.of(context).size.width, | |
child: searchedProps.isEmpty | |
? InkWell( | |
onTap: () { | |
moveCamera(); | |
}, | |
child: Center( | |
child: Container( | |
margin: EdgeInsets.symmetric( | |
horizontal: 10.0, | |
vertical: 20.0, | |
), | |
height: | |
MediaQuery.of(context).size.height * .125, | |
width: MediaQuery.of(context).size.width * .8, | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(10.0), | |
boxShadow: [ | |
BoxShadow( | |
color: Colors.black54, | |
offset: Offset(0.0, 4.0), | |
blurRadius: 10.0, | |
), | |
]), | |
child: Container( | |
decoration: BoxDecoration( | |
borderRadius: | |
BorderRadius.circular(10.0), | |
color: Colors.white), | |
child: Row(children: [ | |
Container( | |
height: MediaQuery.of(context) | |
.size | |
.height * | |
.125, | |
width: MediaQuery.of(context) | |
.size | |
.height * | |
.125, | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.only( | |
bottomLeft: | |
Radius.circular(10.0), | |
topLeft: | |
Radius.circular(10.0)), | |
image: DecorationImage( | |
image: | |
CachedNetworkImageProvider( | |
widget.imgUrl), | |
fit: BoxFit.cover))), | |
SizedBox(width: 5.0), | |
Column( | |
mainAxisAlignment: | |
MainAxisAlignment.spaceEvenly, | |
crossAxisAlignment: | |
CrossAxisAlignment.start, | |
children: [ | |
Text( | |
widget.propName, | |
style: TextStyle( | |
fontSize: 12.5, | |
fontWeight: | |
FontWeight.bold), | |
), | |
Text( | |
widget.adminArea, | |
style: TextStyle( | |
fontSize: 12.0, | |
fontWeight: | |
FontWeight.w600), | |
), | |
Text( | |
widget.locality, | |
style: TextStyle( | |
fontSize: 11.0, | |
fontWeight: | |
FontWeight.w300), | |
), | |
Container( | |
// width: 170.0, | |
child: Text( | |
"${widget.price} Ksh", | |
style: TextStyle( | |
fontSize: 11.0, | |
fontWeight: | |
FontWeight.w300), | |
), | |
) | |
]) | |
])))), | |
) | |
: PageView.builder( | |
controller: _pageController, | |
itemCount: searchedProps.length, | |
itemBuilder: (BuildContext context, int index) { | |
return _coffeeShopList(index); | |
}, | |
), | |
), | |
) | |
], | |
)); | |
}); | |
} | |
} | |
... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment