How to Build an Advanced Team Project Tracking System in FlutterFlow

Your data schema is the foundation of everything. Create a top-level projects collection where each document has fields: name (String), description (String), ownerId (String, uid), memberIds (Array of String, uids), status (String: Active / Completed / Archived), dueDate (Timestamp), createdAt (Timestamp), and milestones (Array of Maps with title and dueDate). Create a tasks subcollection inside each project document. Each task document has: title (String), description (String), assigneeId (String), status (String: Todo / In Progress / In Review / Done), priority (String: Low / Medium / High), dueDate (Timestamp), and updatedAt (Timestamp). Using subcollections means you can query all tasks inside one project cheaply using collectionGroup or a direct subcollection reference, without scanning every task across every project.

Create a DashboardPage. Add a ListView using a Firestore query that fetches only projects where memberIds contains the current user's UID — this ensures each user sees only their projects. For each project card, display a LinearProgressIndicator whose value is completedTaskCount / taskCount (both from the project document — no subcollection reads needed). Show the project name, due date, member avatar row (fetch user avatars from a users collection), and a status chip. Below the project list, add a 'My Tasks' section that queries the top-level or collectionGroup tasks where assigneeId equals the current user's UID and status is not Done, ordered by dueDate, limited to 10 — this section only ever reads 10 documents regardless of how many total tasks exist in the system.

Create a KanbanPage for a selected project. Use a horizontal PageView or Row with four columns: Todo, In Progress, In Review, Done. Each column is a DragTarget that accepts task cards. Query the tasks subcollection for the current project and group them by status using a Custom Function that partitions a JSON array into four sub-lists. Render each column as a Column widget with a header chip showing the column name and count, and a ListView of draggable TaskCard Widgets. Each TaskCard is a Draggable widget — when dragging starts, show a semi-transparent drag preview. When dropped on a column DragTarget, call a Custom Action that updates the task's status field in Firestore. Animate the card moving from one column to another using an AnimatedList widget.

1// Custom Action: updateTaskStatus
2import 'package:cloud_firestore/cloud_firestore.dart';
3
4Future<void> updateTaskStatus({
5  required String projectId,
6  required String taskId,
7  required String newStatus,
8}) async {
9  await FirebaseFirestore.instance
10      .collection('projects')
11      .doc(projectId)
12      .collection('tasks')
13      .doc(taskId)
14      .update({
15    'status': newStatus,
16    'updatedAt': FieldValue.serverTimestamp(),
17  });
18
19  // Update denormalized counts on the project document
20  if (newStatus == 'Done') {
21    await FirebaseFirestore.instance
22        .collection('projects')
23        .doc(projectId)
24        .update({'completedTaskCount': FieldValue.increment(1)});
25  }
26}

Create a TimelinePage using a Custom Widget wrapping the timeline_tile or timelines Flutter package. Display project milestones as timeline nodes in chronological order. Each node shows the milestone title, target date, and a colored dot: red for overdue, orange for due within 7 days, green for completed. Below the milestone timeline, add a horizontal scrollable bar chart showing each task's start-to-due range per assignee — this is a simplified Gantt view built with a Row of Container widgets whose widths are proportional to the date range. This does not require a specialized Gantt package — just a Custom Widget with date math. Load milestone data from the project document's milestones array field (already fetched when the project was selected).

Create a Cloud Function called notifyOnTaskUpdate triggered by Firestore writes to projects/{projectId}/tasks/{taskId}. Compare the before and after snapshots. If assigneeId changed, send an FCM notification to the new assignee's device token (stored in the users collection under fcmToken). If status changed to 'Done', notify the project owner. Use admin.messaging().send() with a notification payload containing the task title and project name. In FlutterFlow's Push Notifications settings, ensure your app is registered for FCM. On first login, save the device token using FlutterFlow's built-in Update User Action to write the FCM token to the users/{uid} document. The Cloud Function reads this token to send targeted notifications.

1// functions/index.js (Cloud Function trigger)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4
5exports.notifyOnTaskUpdate = functions.firestore
6  .document('projects/{projectId}/tasks/{taskId}')
7  .onUpdate(async (change, context) => {
8    const before = change.before.data();
9    const after = change.after.data();
10    const { projectId } = context.params;
11
12    const projectDoc = await admin.firestore().collection('projects').doc(projectId).get();
13    const projectName = projectDoc.data()?.name || 'Your project';
14
15    // Notify new assignee
16    if (before.assigneeId !== after.assigneeId && after.assigneeId) {
17      const userDoc = await admin.firestore().collection('users').doc(after.assigneeId).get();
18      const token = userDoc.data()?.fcmToken;
19      if (token) {
20        await admin.messaging().send({
21          token,
22          notification: {
23            title: 'New task assigned',
24            body: `${after.title} in ${projectName}`,
25          },
26        });
27      }
28    }
29
30    // Notify owner when task is done
31    if (before.status !== 'Done' && after.status === 'Done') {
32      const ownerId = projectDoc.data()?.ownerId;
33      if (ownerId) {
34        const ownerDoc = await admin.firestore().collection('users').doc(ownerId).get();
35        const token = ownerDoc.data()?.fcmToken;
36        if (token) {
37          await admin.messaging().send({
38            token,
39            notification: {
40              title: 'Task completed',
41              body: `${after.title} marked done in ${projectName}`,
42            },
43          });
44        }
45      }
46    }
47  });