How to Create an Event Planning and Guest Management App in FlutterFlow

Create two top-level Firestore collections. The 'events' collection stores: title, description, date_time, location, organizer_id, max_capacity, cover_image_url, is_public, and created_at. The 'event_guests' collection stores each invitation as a separate document with: event_id, guest_email, guest_name, guest_user_id (nullable for non-app users), status (String — 'invited', 'confirmed', 'declined', 'checked_in'), invited_at, responded_at, checked_in_at, and qr_code (a unique token for check-in). This separation means you can have 10,000 guests per event without hitting Firestore's document size limit, and you can query all events a specific guest has been invited to across your entire database.

Create an EventCreationPage with text fields for title, description, and location, a DateTimePicker for the event date and time, an image upload for the cover photo, and a NumberField for max_capacity. On form submission, create the event document in Firestore and navigate to the event detail page. On the EventDetailPage, add an RSVP section with Confirm and Decline buttons. Tapping Confirm creates an event_guests document (if not already present) with status 'confirmed', or updates an existing invitation's status. Show the current RSVP counts (confirmed, declined, pending) in a Row of stat chips at the top of the page using a Firestore aggregate query or a count from a StreamBuilder.

Create a Cloud Function called sendEventInvitations that accepts an event_id and a list of email addresses. For each email, check if the address already has an event_guests document for this event — skip if already invited. Create the event_guests document with status 'invited' and a generated UUID as the qr_code. Send an invitation email using SendGrid or Firebase's Email Trigger Extension with the event details, RSVP links, and a note that their QR code will be sent separately upon confirmation. In FlutterFlow, add an Invite Guests button on the EventDetailPage that opens a dialog with a multi-line TextField for comma-separated email addresses.

1const functions = require('firebase-functions');
2const admin = require('firebase-admin');
3const { v4: uuidv4 } = require('uuid');
4
5exports.sendEventInvitations = functions.https.onCall(async (data, context) => {
6  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
7
8  const { eventId, emails } = data;
9  const db = admin.firestore();
10
11  const eventSnap = await db.collection('events').doc(eventId).get();
12  if (!eventSnap.exists) throw new functions.https.HttpsError('not-found', 'Event not found');
13
14  const event = eventSnap.data();
15  const results = { sent: 0, skipped: 0 };
16
17  for (const email of emails) {
18    const cleanEmail = email.trim().toLowerCase();
19    if (!cleanEmail) continue;
20
21    // Check for existing invitation
22    const existing = await db.collection('event_guests')
23      .where('event_id', '==', eventId)
24      .where('guest_email', '==', cleanEmail)
25      .limit(1).get();
26
27    if (!existing.empty) { results.skipped++; continue; }
28
29    const qrToken = uuidv4();
30    await db.collection('event_guests').add({
31      event_id: eventId,
32      guest_email: cleanEmail,
33      guest_name: cleanEmail.split('@')[0],
34      guest_user_id: null,
35      status: 'invited',
36      qr_code: qrToken,
37      invited_at: admin.firestore.FieldValue.serverTimestamp(),
38      responded_at: null,
39      checked_in_at: null,
40    });
41
42    // Send email via trigger extension or SendGrid
43    await db.collection('mail').add({
44      to: cleanEmail,
45      template: { name: 'event-invitation', data: { eventTitle: event.title, eventDate: event.date_time.toDate().toLocaleDateString(), qrToken } },
46    });
47
48    results.sent++;
49  }
50
51  return results;
52});

Create a Custom Widget called QRScannerWidget using the mobile_scanner package. The widget shows the camera viewfinder and calls a callback with the scanned QR code string when detected. On the EventCheckinPage, display this widget and wire the scan callback to a Custom Action called processCheckin. The processCheckin action queries event_guests where qr_code equals the scanned value AND event_id equals the current event. If found and status is 'confirmed', update status to 'checked_in' and checked_in_at to server timestamp. Show a green success overlay with the guest name. If status is already 'checked_in', show a yellow warning 'Already checked in'. If not found, show a red error overlay.

1import 'package:mobile_scanner/mobile_scanner.dart';
2import 'package:flutter/material.dart';
3
4class QRScannerWidget extends StatefulWidget {
5  final ValueChanged<String> onScanned;
6  const QRScannerWidget({super.key, required this.onScanned});
7
8  @override
9  State<QRScannerWidget> createState() => _QRScannerWidgetState();
10}
11
12class _QRScannerWidgetState extends State<QRScannerWidget> {
13  final MobileScannerController _controller = MobileScannerController();
14  bool _isProcessing = false;
15
16  @override
17  Widget build(BuildContext context) {
18    return MobileScanner(
19      controller: _controller,
20      onDetect: (capture) {
21        if (_isProcessing) return;
22        final barcode = capture.barcodes.firstOrNull;
23        final value = barcode?.rawValue;
24        if (value != null) {
25          setState(() => _isProcessing = true);
26          widget.onScanned(value);
27          // Reset after 2 seconds to allow next scan
28          Future.delayed(const Duration(seconds: 2), () {
29            if (mounted) setState(() => _isProcessing = false);
30          });
31        }
32      },
33    );
34  }
35
36  @override
37  void dispose() {
38    _controller.dispose();
39    super.dispose();
40  }
41}

Create an AttendanceDashboardPage with stat cards showing: Total Invited (count of all event_guests for this event), Confirmed (count where status == 'confirmed'), Checked In (count where status == 'checked_in'), Declined (count where status == 'declined'), and a percentage capacity bar (checked_in / max_capacity). Use Firestore StreamBuilders for each count query. Add a ListView of recent check-ins ordered by checked_in_at descending showing the last 20 arrivals with guest name and time. Add a search TextField that filters the full guest list by name or email for organizers who need to manually look up a guest.