How to show Firebase firestore colletions of nearby collections by location inside a radius of the device using Flutter

user_15187273 0
Viewed 605

I am developing an App using Flutter, like a food delivery app. So I have the restaurant app, and the end-user app.

What I am doing at the moment

Getting the company address (geoLocation), and using lat and lng with geohash to store the location on the Firestore collection for the Restaurants. And for the end-user app, I am getting the current device location.

What I am trying to achieve

On the end-user app, I want to create a list, like uber eats, to show the nearby restaurants, using the current location of the end-user device, with the Restaurant location on our Firestore.

I am using GeoFlutterFire dependencie to achieve the locations.

The function I have

Stream nearbyComp() async* {
    var pos = await location.getLocation();

    GeoFirePoint point =
        geo.point(latitude: pos.latitude, longitude: pos.longitude);
    final CollectionReference users =
        _firebaseFirestore.collection("Companies");

    double radius = 10;
    String field = 'location';

    Stream<List<DocumentSnapshot>> stream = geo
        .collection(collectionRef: users)
        .within(center: point, radius: radius, field: field, strictMode: true);

    yield stream;
  }

Where I am trying to display the List

Container(
            child: StreamBuilder(
              stream: nearbyComp(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return Text("Loading");
                }
                return Container(
                  child: Text("companyName"), // This needs to be changed to a list? Display company name, image, etc, here.
                );
              },
            ),
          ),

Current issue

The issue is, I can't find a way to display the Restaurant Profile on the end-user screen, like image, name, etc. I think I need a ListView.Builder, but don't know how to do it with the Stream on the nearComp() function.

My Firestore

enter image description here

enter image description here

google-cloud-firestore firebase flutter geolocation google-maps
1 Answers

In your streambuilder's return:

return ListView(children: [
for (var item in snapshot.data) 
  ListTile( title: Text ( item["companyEmail"])) 
// Or use item.data()["companyEmail"], I didn't work with //geoFire, but these should work since it's firebase.
])
user_135580350
Related