How to Set Up an Event Ticketing System in FlutterFlow

Create an events collection with fields: title (String), date (Timestamp), venue (String), description (String), imageUrl (String), and a ticketTypes array of maps, each containing name (String like General Admission or VIP), price (Double), totalSeats (Int), availableSeats (Int). Create a tickets collection with fields: eventId (Reference), userId (Reference), ticketType (String), seatNumber (String like A12), qrCodeData (String, unique UUID), status (String enum: held/purchased/used/cancelled), heldUntil (Timestamp, null after purchase). Add a Firestore composite index on tickets for eventId + status to support seat availability queries.

Create a Custom Widget named VenueSeatMap with parameters: eventId (String), rows (Int), seatsPerRow (Int), and an Action Parameter callback onSeatsSelected that returns the selected seat list. Inside the widget, query all tickets for the event. Build a GridView where each cell is a GestureDetector Container representing a seat. Color code: green for available, red for sold (status purchased or used), orange for held (status held and heldUntil is in the future), blue for user-selected. Tapping a green seat adds it to a local selectedSeats list and turns it blue. Tapping a blue seat deselects it. Display a legend Row at the top explaining the colors. Pass the selected seats list back via the callback when the user taps a Confirm Selection button below the grid.

When the user confirms seat selection and taps Proceed to Checkout, run a Cloud Function holdSeats(eventId, seatNumbers, userId). The function uses a Firestore batch write: for each seat, check if a ticket doc already exists with status held or purchased. If not, create a ticket doc with status held, heldUntil set to now + 10 minutes, and the userId. If any seat is already taken, abort the entire batch and return an error. On success, navigate to the checkout page. A scheduled Cloud Function runs every 5 minutes to find tickets where status is held and heldUntil is in the past, then deletes them to release expired holds.

On the checkout page, show the selected seats, ticket type, and total price. On Pay Now button tap, call a Cloud Function createTicketCheckout(eventId, ticketDocIds, totalAmount). The function creates a Stripe Checkout Session with the line items and a success_url pointing back to your app. Return the Checkout URL and open it in a WebView or browser. On Stripe webhook checkout.session.completed, a separate Cloud Function updates each held ticket to status purchased, generates a unique UUID for qrCodeData, decrements the event's availableSeats, and sends a confirmation email with ticket details.

Create a My Tickets page querying tickets where userId equals current user and status is purchased. Display each ticket in a Card with event name, date, seat number, and a QR code rendered by a Custom Widget using qr_flutter: QrImageView(data: ticket.qrCodeData, size: 200). For staff check-in, create a separate Check-In page with a Custom Widget using mobile_scanner. When a QR is scanned, call a Cloud Function validateTicket(qrCodeData). The function finds the ticket by qrCodeData, checks status is purchased (not already used), updates status to used, and returns the ticket details. Display a green checkmark with seat info on valid scan, or a red X for invalid or already-used tickets.