How to Set Up a Food Delivery Tracking System in FlutterFlow

Create an orders collection with fields: userId (String), restaurantId (String), restaurantLat (Double), restaurantLng (Double), items (List of Maps with name, qty, price), total (Double), status (String: 'placed', 'preparing', 'picked_up', 'delivering', 'delivered'), driverId (String, nullable, assigned when driver accepts), estimatedDeliveryTime (Timestamp), deliveryAddress (String), deliveryLat (Double), deliveryLng (Double), and createdAt (Timestamp). Create a drivers collection with: userId (String), displayName (String), currentLat (Double), currentLng (Double), isAvailable (Boolean), and lastLocationUpdate (Timestamp).

Create an OrderTracking page that receives an orderId as a Page Parameter. Add a Backend Query on the order document with Single Time Query OFF for real-time updates. At the top, display a vertical Stepper-style Column with 5 rows representing order stages: Placed (checkmark), Preparing (cooking icon), Picked Up (bag icon), Delivering (motorcycle icon), and Delivered (home icon). For each row, use a Container with a circle icon. Apply Conditional Styling: completed stages show a filled green circle, the current stage shows a pulsing blue circle, and future stages show a grey outline. Connect circles with vertical lines. Below the stepper, show the estimated delivery time and driver name when assigned.

Below the status stepper, add a FlutterFlowGoogleMap or a Custom Widget using google_maps_flutter. Create three markers: a restaurant marker (at restaurantLat/Lng with a red pin), a delivery destination marker (at deliveryLat/Lng with a green pin), and a driver marker (at the driver's currentLat/currentLng from a real-time Backend Query on the driver document). Set Single Time Query OFF on the driver query so the driver marker moves as coordinates update. When status is 'delivering', show a polyline between the driver and destination. Use the Google Directions API to draw a route polyline between the two points.

Create a Custom Action called updateDriverLocation using the geolocator package. The action gets the current position via Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high), then updates the driver's Firestore document with currentLat, currentLng, and lastLocationUpdate. On the driver's active delivery page, use a Timer action that fires this Custom Action every 10 seconds while the order status is 'picked_up' or 'delivering'. Stop the timer when the order reaches 'delivered'. Request location permissions on the driver's page load.

1// Custom Action: updateDriverLocation
2import 'package:geolocator/geolocator.dart';
3import 'package:cloud_firestore/cloud_firestore.dart';
4
5Future<void> updateDriverLocation(String driverDocId) async {
6  bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
7  if (!serviceEnabled) return;
8
9  LocationPermission permission = await Geolocator.checkPermission();
10  if (permission == LocationPermission.denied) {
11    permission = await Geolocator.requestPermission();
12    if (permission == LocationPermission.denied) return;
13  }
14
15  final position = await Geolocator.getCurrentPosition(
16    desiredAccuracy: LocationAccuracy.high,
17  );
18
19  await FirebaseFirestore.instance
20      .collection('drivers')
21      .doc(driverDocId)
22      .update({
23    'currentLat': position.latitude,
24    'currentLng': position.longitude,
25    'lastLocationUpdate': FieldValue.serverTimestamp(),
26  });
27}

Create a DriverOrderPage for the driver interface. Display the order details (items, customer address, total) at the top. Below, add contextual action buttons that change based on the current status. When status is 'placed' and the driver is assigned, show an 'Accept Order' button. When 'preparing', show 'Mark as Picked Up'. When 'picked_up', show 'Start Delivery' (changes to 'delivering' and starts location tracking). When 'delivering', show 'Mark as Delivered'. Each button updates the order status via an Update Document action. On 'delivering', also start the 10-second location timer. On 'delivered', stop the timer and set isAvailable to true on the driver document.

When the driver taps 'Start Delivery', calculate the estimated delivery time using the Google Directions API. Call the API with origin (driver's current position) and destination (delivery address), parse the duration from the response, add it to the current time, and update estimatedDeliveryTime on the order document. The customer's tracking page reads this field and shows a countdown: 'Arriving in ~X minutes'. When the driver taps 'Mark as Delivered', update the order status, stop location tracking, and trigger a push notification to the customer saying 'Your order has been delivered!'. Show a delivery confirmation screen to both driver and customer.