Implementing Geo-Location Based Features in FlutterFlow Using GeoFlutterFire

In the fast-evolving world of mobile app development, tools like FlutterFlow are revolutionizing how we approach design and functionality. FlutterFlow, with its intuitive interface and rich set of features, stands out as a robust tool for building Flutter apps efficiently. However, what truly sets it apart is its flexibility to integrate custom code, allowing developers to extend its capabilities far beyond the built-in features.

In this article, I aim to demonstrate how you can utilize FlutterFlow’s flexibility to include custom coding. We’ll focus on a practical example: managing and organizing data based on geographic locations. This is particularly relevant for applications that require location-based functionality, a common requirement in today’s app development landscape.

Exploring GeoFlutterFire2

GeoFlutterFire is a Flutter library that interfaces with Firebase’s Cloud Firestore for storing and querying geolocation data. It greatly simplifies handling location data, facilitating queries based on geographical proximity.

At the heart of GeoFlutterFire2 are GeoHash and GeoPoint. GeoHash efficiently compresses geographical locations into compact strings, enhancing their querying and indexing capabilities in Firebase. GeoPoint, meanwhile, offers an easy way to store latitude and longitude coordinates in Firebase. Combined, these tools allow developers to execute complex location-based queries with relative ease.

For those who wish to delve deeper into GeoFlutterFire2 and its features, I recommend exploring its official documentation.

Integrating GeoFlutterFire2 with FlutterFlow

After setting up FlutterFlow and Firebase, begin by creating a new location data type, comprising two fields: GeoHash and GeoPoint.

Next, let’s create a ‘Stores’ collection, where we incorporate a field named ‘location’, using the ‘Location’ data type we just crafted.

With our data types and collections in place, we are going to develop a custom action. This action will facilitate adding new entries to the ‘Stores’ collection.

import 'package:geoflutterfire2/geoflutterfire2.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

final geo = GeoFlutterFire();
final _firestore = FirebaseFirestore.instance;

Future createStore(String name, double lng, double lat) async {
  GeoFirePoint geoPoint = geo.point(
    latitude: lat,
    longitude: lng,
  );

  final storeData = {'name': name, 'location': geoPoint.data};

  try {
    await _firestore.collection('stores').add(storeData);
  } catch (e) {
    print(e);
  }
}

After visualization, we can see how a new store with the ‘location’ field is created. Pretty easy, isn’t it?

Filtering the Data by Distance

Next, we’ll add a way for users to find stores based on how close they are. To achieve this, we need a second custom action. Let’s create it and call it getStoresByDistance. It takes the user's current location and a specified radius as inputs and then searches for stores within that specified area.

import 'package:geoflutterfire2/geoflutterfire2.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

final geo = GeoFlutterFire();
final _firestore = FirebaseFirestore.instance;

Future<List<StoresRecord>> getStoresByDistance(
  LatLng userLocation,
  double radius,
) async {
  try {
    var storesCollection = _firestore.collection('stores');
    GeoFirePoint searchCenter = geo.point(
        latitude: userLocation.latitude, longitude: userLocation.longitude);
    String locationField = 'location';

    // Retrieve stores within the specified radius
    var snapshots = await geo
        .collection(collectionRef: storesCollection)
        .within(
            center: searchCenter,
            radius: radius,
            field: locationField,
            strictMode: true)
        .first;

    // Convert snapshots to StoresRecord objects
    return snapshots
        .map((snapshot) => StoresRecord.fromSnapshot(snapshot))
        .toList();
  } catch (e) {
    print(e);
    return [];
  }
}

To demonstrate, I added several stores in different locations and made a map page in FlutterFlow. This map displays the stores and updates as you change the search radius.

This is just an example, but it reflects the general principle of working with location-based filtering. Utilizing GeoFlutterFire2 within FlutterFlow exemplifies how custom coding can substantially elevate our app’s functionality, particularly in geolocation sorting.