How to Create a Real-Time Bus Tracking System in FlutterFlow

Create a buses collection with fields: routeId (String), currentLat (Double), currentLng (Double), heading (Double, compass direction 0-360), speed (Double, km/h), lastUpdated (Timestamp), nextStopId (String), estimatedArrival (Timestamp), driverUserId (String), isActive (Boolean). Create a routes collection: name (String, e.g. 'Route 42'), color (String, hex code for map polyline), stops (Array of Maps with fields: stopId, name, lat, lng, order). Create a stops collection for detailed stop info: name (String), lat (Double), lng (Double), routeIds (String Array, which routes serve this stop).

Create a TrackingMapPage with a FlutterFlowGoogleMap widget taking up the full screen. Set the initial center to your city center coordinates and zoom to 13. Add a Backend Query on routes to fetch all routes. For each route, draw a Polyline on the map using the stops array coordinates and the route's color. Add a Backend Query on buses where isActive is true with real-time enabled (disable Single Time Query). For each bus, place a Marker at currentLat/currentLng with a custom bus icon. The map shows all active buses moving along their colored routes in real-time.

When a user taps a stop marker on the map, open a BottomSheet showing the stop name and a ListView of approaching buses. Query buses where routeId matches any route serving this stop and isActive is true. For each bus, calculate ETA by counting remaining stops between the bus's nextStopId and the selected stop, multiplied by average inter-stop time (2-3 minutes). Display each approaching bus as a row: route name with color indicator, direction arrow, ETA text (e.g. '3 min', '11 min'), and the bus identifier. Sort by ETA ascending so the soonest bus shows first.

Create a DriverPage accessible only to users with a driver role. On Page Load, start a Timer that fires every 10 seconds. Each tick executes a Custom Action using the geolocator package to get the device's current latitude, longitude, heading, and speed. Update the bus document matching the driver's userId with the new position, heading, speed, and a server timestamp for lastUpdated. Calculate nextStopId by finding the closest upcoming stop on the route based on current position and direction. Add a Start Shift / End Shift toggle that sets isActive to true or false. Show the current route name and next stop name on screen for the driver's reference.

1// Custom Action: updateBusPosition
2import 'package:geolocator/geolocator.dart';
3import 'package:cloud_firestore/cloud_firestore.dart';
4
5Future<void> updateBusPosition(String busDocId) async {
6  final position = await Geolocator.getCurrentPosition(
7    desiredAccuracy: LocationAccuracy.high,
8  );
9  await FirebaseFirestore.instance
10    .collection('buses')
11    .doc(busDocId)
12    .update({
13      'currentLat': position.latitude,
14      'currentLng': position.longitude,
15      'heading': position.heading,
16      'speed': position.speed * 3.6, // m/s to km/h
17      'lastUpdated': FieldValue.serverTimestamp(),
18    });
19}

Create a Custom Widget that wraps the map marker logic. Instead of instantly jumping the bus icon to new coordinates every 10 seconds, interpolate between the old and new positions over the update interval. Use an AnimationController with a 10-second duration. When a new position arrives from Firestore, store the old lat/lng and animate a Tween from old to new coordinates. The marker slides smoothly across the map. Also rotate the bus icon based on the heading field so it points in the direction of travel. This makes the tracking feel fluid and professional rather than jerky.