How to Implement Location-Based Services in FlutterFlow

Every document representing a physical location needs two fields stored together. In FlutterFlow's Firestore panel, add to your locations or listings collection: a location field of type LatLng (FlutterFlow's built-in type, which maps to Firestore GeoPoint) and a geohash field of type String. The geohash is a Base32 encoded string like 'u4pruydqqvj' where longer strings represent more precise locations. Store geohash precision 9 (9-character strings) for most use cases — this gives approximately 5-meter accuracy. The geohash is what you query; the GeoPoint is what you use to calculate exact distance after fetching results.

In FlutterFlow Settings → Custom Code → Dependencies, add three packages: geolocator (^13.0.0) for getting the user's GPS position with proper permission handling, geoflutterfire_plus (^0.0.30) for generating geohash values and creating query bounds, and latlong2 (^0.9.0) for the Haversine distance calculation. These three packages form the complete location services stack. After adding dependencies, create a Custom Action named requestLocationPermission that calls Geolocator.requestPermission() and stores the result. Call this action early in your app flow — on the discovery page's first load — before attempting any location queries.

Create a Custom Action named getUserLocation. This action calls Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.medium) with a 10-second timeout. If it succeeds, store the latitude and longitude in App State variables named userLatitude and userLongitude (both Double type). If location permissions are denied, show a Snackbar explaining that the feature requires location access and provide a button to open Settings. Use LocationAccuracy.medium rather than .best — medium accuracy is sufficient for proximity search and uses significantly less battery. Cache the position for 5 minutes using a timestamp App State variable to avoid re-requesting GPS on every page render.

1// Custom Action: getUserLocation
2import 'package:geolocator/geolocator.dart';
3
4Future<Map<String, dynamic>> getUserLocation() async {
5  LocationPermission permission = await Geolocator.checkPermission();
6
7  if (permission == LocationPermission.denied) {
8    permission = await Geolocator.requestPermission();
9    if (permission == LocationPermission.denied) {
10      return {'success': false, 'error': 'Location permission denied'};
11    }
12  }
13
14  if (permission == LocationPermission.deniedForever) {
15    return {'success': false, 'error': 'Location permission permanently denied'};
16  }
17
18  try {
19    final position = await Geolocator.getCurrentPosition(
20      desiredAccuracy: LocationAccuracy.medium,
21      timeLimit: const Duration(seconds: 10),
22    );
23    return {
24      'success': true,
25      'latitude': position.latitude,
26      'longitude': position.longitude,
27    };
28  } catch (e) {
29    return {'success': false, 'error': 'Could not get location: $e'};
30  }
31}

Create a Custom Action named queryNearbyItems. This action generates geohash bounds for the search radius using GeoFirePoint from geoflutterfire_plus, then queries Firestore using a range filter on the geohash field. The bounds are the minimum and maximum geohash strings that fall within your radius. A range query returns all documents whose geohash falls between those bounds — this gives you approximately the right bounding box. After fetching, calculate the exact distance using Geolocator.distanceBetween() and filter out any documents outside the precise radius (geohash bounding boxes are squares, not circles). Sort the results by distance ascending.

1// Custom Action: queryNearbyItems
2import 'package:geoflutterfire_plus/geoflutterfire_plus.dart';
3import 'package:cloud_firestore/cloud_firestore.dart';
4import 'package:geolocator/geolocator.dart';
5
6Future<List<Map<String, dynamic>>> queryNearbyItems({
7  required double userLat,
8  required double userLng,
9  required double radiusKm,
10}) async {
11  // Generate geohash bounds for the search radius
12  final center = GeoFirePoint(GeoPoint(userLat, userLng));
13  final bounds = GeoFirePoint.queryBounds(
14    center: center.geopoint,
15    radiusInKm: radiusKm,
16  );
17
18  final db = FirebaseFirestore.instance;
19  final futures = bounds.map((bound) {
20    return db.collection('listings')
21        .orderBy('geohash')
22        .startAt([bound.startValue])
23        .endAt([bound.endValue])
24        .limit(50)
25        .get();
26  });
27
28  final snapshots = await Future.wait(futures);
29  final allDocs = snapshots.expand((s) => s.docs).toList();
30
31  // Calculate exact distance and filter/sort
32  final results = <Map<String, dynamic>>[];
33  for (final doc in allDocs) {
34    final data = doc.data();
35    final geoPoint = data['location'] as GeoPoint;
36    final distanceMeters = Geolocator.distanceBetween(
37      userLat, userLng,
38      geoPoint.latitude, geoPoint.longitude,
39    );
40    final distanceKm = distanceMeters / 1000;
41
42    if (distanceKm <= radiusKm) {
43      results.add({
44        ...data,
45        'id': doc.id,
46        'distanceKm': distanceKm,
47        'distanceLabel': distanceKm < 1
48            ? '${(distanceKm * 1000).round()}m away'
49            : '${distanceKm.toStringAsFixed(1)}km away',
50      });
51    }
52  }
53
54  results.sort((a, b) =>
55      (a['distanceKm'] as double).compareTo(b['distanceKm'] as double));
56  return results;
57}

On your discovery page, add a Google Maps widget and a ListView below it (or use a DraggableScrollableSheet for a bottom-sheet list overlaying the map). Store the query results in a Page State variable named nearbyItems (JSON list). When the page loads, call getUserLocation then queryNearbyItems, and store results in nearbyItems. In the Google Maps widget, add markers for each item using its GeoPoint coordinates. In the ListView, display each item as a card showing the item name, category, distance label, and a thumbnail image. Make list items tappable to navigate to the detail page and animate the map to center on that item's marker.