How to Create a Ticketing System for Public Transport in FlutterFlow

Create a routes collection with fields: name (String, e.g. 'Downtown Express Line'), stops (String Array listing all stops in order), scheduleUrl (String, link to schedule PDF or page), fares (Map of ticket type to price: single 2.50, day 8.00, week 25.00, month 80.00). Create a tickets collection: userId (String), routeId (String), routeName (String), ticketType (String: single, day, week, month), validFrom (Timestamp), validUntil (Timestamp), qrCodeData (String, the secure QR payload), status (String: active, used, expired), purchasedAt (Timestamp), stripePaymentId (String).

Create a BuyTicket page. Display available routes in a ListView, each row showing route name, number of stops, and a brief description. When a user taps a route, show ticket type options in a BottomSheet or new section: four Container cards showing Single Ride (2h valid), Day Pass, Weekly Pass, and Monthly Pass with prices from the route's fares map. Each card shows the ticket type name, validity duration, and price. On selection, update Page State with selectedRoute and selectedTicketType.

On the Confirm Purchase button tap, call a Cloud Function that creates a Stripe Checkout Session with the ticket price and metadata (routeId, ticketType, userId). The function returns a checkout URL. Launch the URL using a Launch URL action. After successful payment, a Stripe webhook calls another Cloud Function (checkout.session.completed) that creates the ticket document in Firestore: sets validFrom to now, calculates validUntil based on ticket type, generates the QR code data with HMAC, and sets status to 'active'. The passenger is redirected back to the app showing their new ticket.

1// Cloud Function: createTicket (called by Stripe webhook)
2import * as functions from 'firebase-functions';
3import * as admin from 'firebase-admin';
4import * as crypto from 'crypto';
5admin.initializeApp();
6
7const HMAC_SECRET = functions.config().tickets.hmac_secret;
8
9export const handleTicketPurchase = functions.https.onRequest(async (req, res) => {
10  const event = req.body;
11  if (event.type !== 'checkout.session.completed') {
12    res.status(200).send('ignored');
13    return;
14  }
15
16  const session = event.data.object;
17  const { routeId, ticketType, userId } = session.metadata;
18  const now = admin.firestore.Timestamp.now();
19
20  const validityHours: Record<string, number> = {
21    single: 2, day: 24, week: 168, month: 720
22  };
23  const validUntil = new Date(now.toDate().getTime() +
24    validityHours[ticketType] * 3600000);
25
26  const ticketRef = admin.firestore().collection('tickets').doc();
27  const ticketId = ticketRef.id;
28  const hmac = crypto.createHmac('sha256', HMAC_SECRET)
29    .update(ticketId + userId + ticketType)
30    .digest('hex')
31    .substring(0, 16);
32  const qrCodeData = `${ticketId}:${hmac}`;
33
34  await ticketRef.set({
35    userId, routeId, ticketType, qrCodeData,
36    validFrom: now,
37    validUntil: admin.firestore.Timestamp.fromDate(validUntil),
38    status: 'active',
39    purchasedAt: now,
40    stripePaymentId: session.payment_intent,
41  });
42
43  res.status(200).send('ok');
44});

Create a TicketWallet page. Query tickets where userId equals current user, ordered by purchasedAt descending. Group tickets visually: active tickets at the top with full color, used and expired tickets below with greyed styling. Each ticket card shows: route name, ticket type badge, validity period (Valid until date and time), status badge (green for active, grey for used, red for expired), and a View QR button. On tap, navigate to a TicketDetail page showing a large QR code rendered with a qr_flutter Custom Widget displaying the qrCodeData string. Add a brightness slider or white background container around the QR for scanner readability.

Create a ValidateTicket page for station staff. Add a mobile_scanner Custom Widget that reads QR codes from the camera. When a QR is scanned, extract the ticket data (ticketId and hmac from the colon-separated string). Call a Cloud Function that: looks up the ticket by ID, recomputes the HMAC from the ticket's fields and the secret, compares it to the scanned HMAC, checks that status is 'active', and checks that the current time is before validUntil. If valid, return success and optionally mark single-use tickets as 'used'. Display a green checkmark with ticket details for valid tickets, or a red X with the rejection reason for invalid or expired tickets.

Create a scheduled Cloud Function that runs every hour. It queries all tickets where status equals 'active' and validUntil is less than or equal to the current timestamp. For each expired ticket, update status to 'expired'. This ensures the ticket wallet always reflects accurate status even if the user has not opened the app. On the TicketWallet page, also add a client-side check: if validUntil has passed but status is still 'active', display it as expired locally while the Cloud Function catches up.