Build Your Uber Clone: Flutter Google Maps & Firestore Geolocation Tutorial

Introduction

Real-time geolocation is a core feature of many successful apps, and in this tutorial, we'll explore how to build some of the fundamental components using Flutter, Google Maps, and Firestore. Inspired by apps like Uber, we'll dive into device GPS tracking, real-time geolocation queries, and reactive UI updates, all within a relatively small codebase. Get ready to leverage the power of FlutterFire and the GeoFlutterFire library to create location-aware applications!

Setting Up Your Flutter Project

Before diving into the code, you'll need to set up your Flutter environment and configure Firebase. This involves installing FlutterFire and creating a Firebase project. Remember to enable the Google Maps API for your GCP project to obtain an API key. Once you have your API key, incorporate it into your Flutter project for both Android and iOS platforms.

Dependencies

Make sure you have the following dependencies in your pubspec.yaml file:

• firebase_core
• cloud_firestore
• rxdart (for stream management)
• geo_flutter_fire
• location
• google_maps_flutter (Note: This package is relatively new and may have breaking changes)

To install the packages, run the following command in your terminal:

flutter pub get

Platform-Specific Setup

For Android, you'll need to request location permission in your AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Also, add the Google Maps API key as metadata within the <application> tag.

For iOS, add your API key in the AppDelegate.m file and include the necessary key-value pairs in your Info.plist to request location permission from the user.

Building the Google Maps UI with Flutter

The user interface is built using a Stack widget. The GoogleMap widget takes up the entire screen and serves as the base layer. The initialCameraPosition property determines the initial zoom level and the center point of the map.

The following code demonstrates how to create a full-screen Google Map:

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.7749, -122.4194), // Example: San Francisco coordinates
    zoom: 12,
  ),
  onMapCreated: (GoogleMapController controller) {
    // Handle map controller here
  },
  myLocationEnabled: true, // Enable user's location
  mapType: MapType.normal, // Choose map type (normal, satellite, etc.)
)

The onMapCreated callback provides a GoogleMapController, which allows you to programmatically interact with the map (e.g., adding markers, animating the camera).

Adding Markers and Tracking User Location

You can add markers to the map using the GoogleMapController. First, create a Marker object with the desired position, icon, and info window text. Then, use the addMarker method of the controller to display the marker on the map.

To track the user's location, use the location plugin. You can either get the current location as a Future or listen to location changes as a real-time Stream. Use the animateCamera method of the GoogleMapController to move the camera to the user's current location.

Storing Geolocation Data in Firestore with GeoFlutterFire

GeoFlutterFire simplifies the process of storing and querying geolocation data in Firestore. It utilizes GeoHashes to efficiently query for locations within a specific radius.

To add a GeoPoint to Firestore, you first need to get the user's current location using the location plugin. Then, create a GeoFirePoint object with the latitude and longitude. Finally, add a document to your Firestore collection with a "position" field containing the GeoFirePoint data.

Here's an example of how to add a GeoPoint:

Future<void> addGeoPoint() async {
  LocationData location = await _location.getLocation();
  GeoFirePoint point = GeoFirePoint(location.latitude, location.longitude);

  _firestore.collection('locations').add({
    'position': point.data,
  });
}

Querying and Displaying Geolocation Data Reactively

To query for GeoPoints within a certain radius, you can use the GeoFlutterFire library. Create a GeoFireCollectionRef object pointing to your Firestore collection. Then, use the within method to create a query that filters documents within the specified radius of a given center point.

Use RxDart to manage the radius value as a BehaviorSubject. This allows you to dynamically update the query based on user input (e.g., a slider). Subscribe to the stream of documents from the query and update the markers on the map whenever the data changes.

Conclusion

This tutorial provides a foundation for building location-aware applications using Flutter, Google Maps, and Firestore. By leveraging tools like GeoFlutterFire, you can efficiently store, query, and display geolocation data in real-time. Remember to handle stream subscriptions carefully to prevent memory leaks. With these concepts in hand, you're well on your way to creating your own Uber-like application!

Keywords: Flutter, Google Maps, Firestore, Geolocation, GeoFlutterFire