How to Build a Custom Notification Center in FlutterFlow

In Firestore, each user gets their own notifications subcollection at users/{uid}/notifications. Create fields: title (String), body (String), type (String — 'order', 'message', 'system', 'promo'), isRead (Boolean, default false), timestamp (Timestamp), and actionUrl (String — in-app route like '/orders/abc123'). Set Firestore rules: match /users/{uid}/notifications/{notifId} { allow read, update: if request.auth.uid == uid; }. Only Cloud Functions should create notifications (admin SDK bypasses rules).

In your main page's AppBar, place a Stack widget in the actions area. Bottom layer: IconButton with Icons.notifications_outlined, On Tap navigates to NotificationsPage. Top layer: a Positioned Container (18×18, circular, red background) in the top-right corner containing a Text widget with the unread count. Bind the count via a Backend Query on users/{currentUser.uid}/notifications where isRead == false, using the query result count. Wrap the badge in Conditional Visibility: hide when count == 0. Set Single Time Query to OFF for real-time updates.

Create NotificationsPage with a ListView bound to Backend Query: users/{currentUser.uid}/notifications, ordered by timestamp descending, limit 20, infinite scroll ON. Each item is a Component with a Row: left has a small Container (8×8, circular, blue — Conditional Visibility: isRead == false), then an Icon that varies by type (Icons.shopping_bag for 'order', Icons.message for 'message', Icons.campaign for 'promo', Icons.info for 'system' — use Conditional Value), then a Column with title Text (Conditional Style: fontWeight bold when !isRead, normal when isRead) and body Text in secondaryText color plus a timestamp Text. Set the Row background: light blue tint (#E3F2FD) when !isRead, white when isRead via Conditional Style.

On each notification Component, add an On Tap action trigger. Action Flow: first Update Document → set isRead = true on this notification's document reference. Then navigate using the actionUrl field: add a Conditional Action chain — if type == 'order' Navigate To OrderDetailPage (pass the ID parsed from actionUrl), if type == 'message' Navigate To ChatPage, etc. The unread badge decrements automatically because the real-time count query detects the isRead change. For dynamic routing without conditionals: use a Custom Action with Navigator.pushNamed(context, notification.actionUrl).

In the NotificationsPage AppBar, add an IconButton (Icons.done_all). On Tap Action Flow: query all notifications where isRead == false for the current user, then loop through results calling Update Document isRead = true on each. For better performance, use a Custom Action with Firestore WriteBatch to update all in a single batch write. For swipe-to-dismiss: create a Custom Widget that wraps each notification Component in Flutter's Dismissible widget with direction: DismissDirection.endToStart, a green background with a checkmark icon, and onDismissed calling an Action Parameter callback that marks isRead = true.

1// Custom Widget: DismissibleNotification
2Dismissible(
3  key: Key(widget.notificationId),
4  direction: DismissDirection.endToStart,
5  background: Container(
6    color: Colors.green,
7    alignment: Alignment.centerRight,
8    padding: const EdgeInsets.only(right: 16),
9    child: const Icon(Icons.done, color: Colors.white),
10  ),
11  onDismissed: (_) => widget.onDismiss?.call(widget.notificationId),
12  child: widget.child,
13)