Build a restaurant reservation system that matches party size to available tables. The Firestore data model includes restaurants, tables with seat counts and locations, and reservations with date, time slot, and status. Users select a date and party size, then see available time slots filtered by tables that fit their group. Booking creates a reservation document linked to a specific table, and a confirmation screen shows the details. An admin view displays all reservations for a given day organized by table in a grid layout.
Building a Table Reservation System in FlutterFlow
This tutorial builds a restaurant reservation system where table assignment depends on party size, not just time availability. Unlike a simple appointment scheduler, this system considers table capacity, indoor versus outdoor seating preferences, and special requests. It includes both the customer booking flow and an admin day-view for restaurant staff to manage the floor. This pattern works for restaurants, event venues, co-working spaces, and any business with capacity-based scheduling.
Prerequisites
- A FlutterFlow project with Firestore configured
- Basic understanding of Backend Queries and DateTimePicker in FlutterFlow
- Firestore collections for restaurants, tables, and reservations
- Familiarity with Page State variables
Step-by-step guide
Create the Firestore data model for restaurants, tables, and reservations
Create the Firestore data model for restaurants, tables, and reservations
Create a restaurants collection with fields: name (String), address (String), capacity (int), operatingHours (Map with startHour and endHour as ints, e.g., 11 and 22). Create a tables collection with fields: restaurantId (String), tableNumber (int), seats (int), location (String: indoor, outdoor, bar). Create a reservations collection with fields: tableId (String), restaurantId (String), userId (String), date (String, formatted YYYY-MM-DD), timeSlot (String, e.g., '18:00'), partySize (int), status (String: confirmed, cancelled, completed), specialRequests (String), createdAt (Timestamp). Add 6-8 sample tables with varied seat counts.
Expected result: Firestore has restaurants, tables, and reservations collections with the table-based reservation model.
Build the booking form with date and party size selection
Build the booking form with date and party size selection
Create a ReservationPage with Route Parameter restaurantId. Display the restaurant name and address at the top from a Backend Query. Add a DateTimePicker configured for date-only selection with a minimum date of today. Add a party size DropDown with options 1 through 10. Store both selections in Page State: selectedDate (String) and selectedPartySize (int). Add a Find Available Times button that triggers the availability query in the next step. Disable the button until both date and party size are selected.
Expected result: Users can select a date and party size before searching for available time slots.
Query available time slots filtered by table capacity
Query available time slots filtered by table capacity
On Find Available Times tap, query the tables collection where restaurantId matches and seats >= selectedPartySize. For each qualifying table, query reservations where tableId matches, date equals selectedDate, and status equals confirmed. Generate time slots in 30-minute increments between the restaurant's startHour and endHour. Remove slots that overlap with existing reservations. Display available slots as tappable Containers in a Wrap widget, each showing the time and table location. Grey out unavailable times. Store the selected slot and table in Page State.
Expected result: Available time slots display based on real table capacity and existing reservations.
Create the reservation and show confirmation
Create the reservation and show confirmation
Add a special requests TextField below the time slots for dietary needs or celebration notes. Add a Confirm Reservation button. On tap, create a document in the reservations collection with tableId, restaurantId, userId, date, timeSlot, partySize, status set to confirmed, specialRequests, and createdAt timestamp. Navigate to a ConfirmationPage that displays: restaurant name, date, time, party size, table number, and location. Include an Add to Calendar button using a Launch URL action with a Google Calendar event link, and a Cancel Reservation button that updates the status to cancelled.
Expected result: A reservation is created in Firestore and the user sees a confirmation with all booking details.
Build the admin day view for managing reservations
Build the admin day view for managing reservations
Create an AdminDayViewPage accessible to restaurant staff. Add a DateTimePicker at the top for selecting the day. Query all reservations for the selected date and restaurantId. Display a grid layout: rows represent tables (sorted by tableNumber), columns represent time slots. Each cell shows either empty (available) or the reservation details (guest name, party size, status with color coding: green for confirmed, red for cancelled, blue for completed). Staff can tap a reservation to view details or update its status.
Expected result: Restaurant staff see a table-by-time grid of all reservations for any given day.
Complete working example
1FIRESTORE DATA MODEL:2 restaurants/{restaurantId}3 name: String4 address: String5 capacity: int6 operatingHours: { startHour: 11, endHour: 22 }78 tables/{tableId}9 restaurantId: String10 tableNumber: int11 seats: int12 location: String (indoor / outdoor / bar)1314 reservations/{reservationId}15 tableId: String16 restaurantId: String17 userId: String18 date: String (YYYY-MM-DD)19 timeSlot: String (e.g., "18:00")20 partySize: int21 status: String (confirmed / cancelled / completed)22 specialRequests: String23 createdAt: Timestamp2425PAGE: ReservationPage26 Route Parameter: restaurantId27 Page State: selectedDate, selectedPartySize, selectedTimeSlot, selectedTableId2829 WIDGET TREE:30 SingleChildScrollView31 Column32 ├── Text (restaurant name + address)33 ├── DateTimePicker (date only, min: today)34 ├── DropDown (party size: 1-10)35 ├── Button ("Find Available Times")36 │ On Tap: query tables where seats >= partySize37 │ → for each table, check reservations on date38 │ → generate available 30-min slots39 ├── Wrap (available time slot Containers)40 │ └── Container per slot41 │ Text (time + location)42 │ On Tap: set selectedTimeSlot + selectedTableId43 ├── TextField (special requests, multiline)44 └── Button ("Confirm Reservation")45 On Tap: create reservation doc → navigate to Confirmation4647PAGE: ConfirmationPage48 Route Params: reservationId49 Column50 ├── Icon (checkmark circle)51 ├── Text ("Reservation Confirmed")52 ├── Details: restaurant, date, time, party size, table, location53 ├── Button ("Add to Calendar" → Launch URL)54 └── Button ("Cancel Reservation" → update status)5556PAGE: AdminDayViewPage57 DateTimePicker (select day)58 Grid: rows = tables, columns = time slots59 Cell: empty or reservation card (name, partySize, status color)Common mistakes
Why it's a problem: Not considering party size in the availability query
How to avoid: Always filter tables by seats >= selectedPartySize before checking time slot availability.
Why it's a problem: Generating time slots outside restaurant operating hours
How to avoid: Read the restaurant operatingHours document and only generate slots between startHour and endHour.
Why it's a problem: Not handling concurrent bookings for the same table and time
How to avoid: Use a Firestore transaction or Cloud Function to atomically check availability and create the reservation. Reject if a conflict exists.
Best practices
- Filter tables by party size so guests are always seated at appropriately sized tables
- Generate time slots dynamically from restaurant operating hours, not hardcoded values
- Use Firestore transactions to prevent double-booking the same table and time slot
- Show table location (indoor, outdoor, bar) alongside time slots so guests can choose
- Include a special requests field for dietary needs, celebrations, or accessibility requirements
- Color-code reservation status in the admin view for quick visual scanning
- Allow cancellation up to a configurable cutoff time before the reservation
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a restaurant reservation system in FlutterFlow with table assignment based on party size, Firestore collections for restaurants, tables, and reservations, a customer booking flow with date and time selection, and an admin day view showing reservations by table. Give me the data model, widget tree, and availability query logic.
Create a reservation page with a date picker, a party size dropdown, a grid of available time slots showing the table location, a special requests text field, and a Confirm Reservation button at the bottom.
Frequently asked questions
How do I handle walk-in guests in the reservation system?
Add a Walk-In button on the admin page that creates a reservation with status set to walk-in and the current time as the slot. This occupies the table in the system without requiring a customer account.
Can I set different operating hours for different days?
Yes. Change the operatingHours field to a Map of day names to start and end hours. When generating slots, look up the hours for the selected day of the week.
How do I limit how far in advance guests can book?
Set the DateTimePicker maximum date to a date calculated as today plus your booking window, such as 30 days. This prevents reservations too far in the future.
Can guests choose a specific table?
Yes. After filtering by party size and time, display available tables as cards showing table number, seats, and location. Let the user tap their preferred table instead of auto-assigning one.
How do I send reservation confirmation emails?
Create a Cloud Function triggered by new reservation documents. The function reads the reservation and user details, composes a confirmation email with date, time, and table info, and sends it via a service like SendGrid or Firebase Extensions.
Can RapidDev help build a restaurant management platform?
Yes. RapidDev can build complete restaurant systems with reservation management, waitlist queuing, table layout visualization, POS integration, and automated reminder notifications.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation