How to Set Up a Public Safety Alert System in FlutterFlow

Create an `alerts` collection with fields: title (String), body (String), severity (String — info, warning, critical, or emergency), type (String — weather, crime, infrastructure, or health), affectedArea (String — city or region name), isActive (bool), expiresAt (Timestamp), and createdBy (String — admin userId). Also add createdAt (Timestamp) for sorting. Create an Option Set named AlertSeverity with values: info (blue), warning (yellow), critical (orange), emergency (red). This maps severity levels to colors throughout the app. Import the schema into FlutterFlow's Firestore panel.

Create an Alerts page with a Backend Query on the `alerts` collection filtered by isActive == true, ordered by severity descending (so emergencies appear first) and createdAt descending. Bind the results to a ListView. Each list item is a Container with a left border colored by severity (use Conditional Styling: red for emergency, orange for critical, yellow for warning, blue for info). Inside, display the title (bold), body text, type badge, affected area, and time since posting. Add a ChoiceChips filter above the list for alert types (All, Weather, Crime, Infrastructure, Health) that updates the Backend Query filter.

For critical and emergency alerts, you need impossible-to-miss UI elements. On your main app pages, add an On Page Load Backend Query that checks for active alerts where severity equals 'emergency' or 'critical'. If an emergency alert exists, display a full-screen Container overlay with a red background, a large warning icon, the alert title and body in white bold text, and a Dismiss button. Use Page State `alertDismissed` to track whether the user has acknowledged the alert. For warning-level alerts, show a persistent yellow banner at the top of the page using a Conditional Visibility Container. The banner shows the alert title with a Close IconButton.

Create a Cloud Function triggered by Firestore onCreate on the `alerts` collection. When a new alert is created, the function reads the severity and constructs an FCM message. For emergency and critical alerts, set the Android priority to 'high' and the APNs content-available flag to trigger immediate delivery even when the app is backgrounded. Send to the 'all_users' FCM topic (subscribe all app users to this topic on first launch). Include the alert title, body, and severity in the notification payload. For info and warning severity, use normal priority to avoid disturbing users at night.

1// Cloud Function: onAlertCreated
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.onAlertCreated = functions.firestore
7  .document('alerts/{alertId}')
8  .onCreate(async (snap) => {
9    const alert = snap.data();
10    const isUrgent = ['emergency', 'critical']
11      .includes(alert.severity);
12
13    const message = {
14      topic: 'all_users',
15      notification: {
16        title: `${alert.severity.toUpperCase()}: ${alert.title}`,
17        body: alert.body,
18      },
19      data: {
20        alertId: snap.id,
21        severity: alert.severity,
22        type: alert.type,
23      },
24      android: {
25        priority: isUrgent ? 'high' : 'normal',
26        notification: {
27          sound: isUrgent ? 'alarm' : 'default',
28          channelId: isUrgent
29            ? 'emergency_alerts'
30            : 'general_alerts',
31        },
32      },
33      apns: {
34        payload: {
35          aps: {
36            sound: isUrgent ? 'alarm.caf' : 'default',
37            'content-available': 1,
38          },
39        },
40      },
41    };
42
43    await admin.messaging().send(message);
44  });

Create an AdminAlerts page gated by Conditional Visibility checking the current user's role field equals 'admin'. The page has a Create Alert form with: title TextField, body TextField (multiline), severity DropDown (from AlertSeverity Option Set), type DropDown (weather/crime/infrastructure/health), affectedArea TextField, and expiresAt DateTimePicker. On submit, create a document in the `alerts` collection with all fields plus isActive set to true and createdAt set to now. Below the form, show a ListView of all alerts (active and expired) with toggle Switches for isActive and Delete IconButtons. Add a Cloud Function scheduled to run hourly that sets isActive to false on alerts where expiresAt is in the past.