How to Implement Multi-User Collaboration in FlutterFlow

Create two Firestore collections. The 'boards' collection stores board metadata: name, ownerId, memberIds (array of user UIDs), and createdAt. The 'tasks' subcollection lives under each board document: boards/{boardId}/tasks. Each task document has title, description, status ('todo', 'inprogress', 'done'), assignedToId (user UID), assignedToName (denormalized), sortOrder (integer), and createdAt. Using a subcollection means Firestore handles each task update independently — user A updating task 1 and user B updating task 2 at the same millisecond causes no conflict. Add Firestore security rules that allow read/write only for users listed in the board's memberIds array.

1// Firestore Security Rules
2rules_version = '2';
3service cloud.firestore {
4  match /databases/{database}/documents {
5    // Board: readable/writable by members only
6    match /boards/{boardId} {
7      allow read, write: if request.auth != null
8        && request.auth.uid in resource.data.memberIds;
9
10      // Tasks subcollection: same membership check
11      match /tasks/{taskId} {
12        allow read, write: if request.auth != null
13          && request.auth.uid in get(/databases/$(database)/documents/boards/$(boardId)).data.memberIds;
14      }
15    }
16  }
17}

Create a 'Board Detail' page in FlutterFlow. Add a Backend Query at the page level for the specific board document (query by document ID, passed as a page parameter). Add a second Backend Query for the tasks subcollection: path is boards/{boardId}/tasks, ordered by status and then sortOrder, with real-time listening enabled (toggle 'Single Time Query' OFF). This means FlutterFlow subscribes to the subcollection and automatically updates the UI whenever any team member creates, updates, or deletes a task. Build a Kanban column layout: three Columns (Todo, In Progress, Done) each with a filtered ListView showing tasks where status matches.

Add a FloatingActionButton that opens a Bottom Sheet modal for new task creation. The form has a title TextField, description TextField, status dropdown, and a user picker for assignment. For the user picker, add a Backend Query loading all board member profiles (query the 'users' collection by UID, filtered to the board's memberIds). Display members as a horizontal row of avatar chips — tapping one selects that member as the assignee. On form submit, use a Firestore Create Document action to add the task to boards/{boardId}/tasks, storing the selected user's UID and display name as assignedToId and assignedToName.

When a task is assigned to a user, send them a push notification. This requires a Cloud Function that fires on tasks onCreate and checks if an assignedToId exists. It reads the assigned user's FCM token from their user document, then calls Firebase Admin SDK's messaging().send(). Store FCM tokens in the user document when the app starts: in FlutterFlow's App initialization actions, request notification permission, get the FCM token (use the Get Device Token action), and save it to the user's Firestore document.

1// functions/index.js — Task assignment notification
2exports.onTaskAssigned = functions.firestore
3  .document('boards/{boardId}/tasks/{taskId}')
4  .onCreate(async (snap, context) => {
5    const task = snap.data();
6    if (!task.assignedToId) return null;
7
8    const userDoc = await admin.firestore()
9      .doc(`users/${task.assignedToId}`)
10      .get();
11
12    const fcmToken = userDoc.data()?.fcmToken;
13    if (!fcmToken) return null;
14
15    const message = {
16      token: fcmToken,
17      notification: {
18        title: 'New task assigned to you',
19        body: task.title,
20      },
21      data: {
22        boardId: context.params.boardId,
23        taskId: context.params.taskId,
24        type: 'task_assigned',
25      },
26      android: { priority: 'high' },
27      apns: { payload: { aps: { badge: 1 } } },
28    };
29
30    await admin.messaging().send(message);
31    return null;
32  });

Users can invite collaborators by sharing a deep link that opens the app to the specific board and adds the user to the memberIds array. In FlutterFlow, enable Deep Linking in Project Settings → App Details → Deep Linking. Set the deep link format to yourapp://board?id={boardId}. Create a 'Join Board' page that parses the board ID from the incoming deep link URL parameter, shows the board details, and has a 'Join Board' button. The Join button calls a Cloud Function (or Firestore Update) that adds the current user's UID to the board's memberIds array using FieldValue.arrayUnion.

1// Cloud Function: joinBoard
2exports.joinBoard = functions.https.onCall(async (data, context) => {
3  if (!context.auth) {
4    throw new functions.https.HttpsError('unauthenticated', 'Login required');
5  }
6
7  const { boardId } = data;
8  const userId = context.auth.uid;
9
10  const boardRef = admin.firestore().doc(`boards/${boardId}`);
11  const board = await boardRef.get();
12
13  if (!board.exists) {
14    throw new functions.https.HttpsError('not-found', 'Board not found');
15  }
16
17  // Add user to members (arrayUnion avoids duplicates)
18  await boardRef.update({
19    memberIds: admin.firestore.FieldValue.arrayUnion(userId),
20  });
21
22  return { success: true, boardName: board.data().name };
23});