How to Set Up a Collaborative Project Management Tool in FlutterFlow

In your Firebase Console, create a top-level `projects` collection with fields: name (String), description (String), ownerId (String), memberIds (List of Strings), status (String: active/archived), createdAt (Timestamp). Then create a subcollection `tasks` under each project with fields: title (String), description (String), status (String: todo/inProgress/review/done), assigneeId (String), priority (String: low/medium/high), dueDate (Timestamp), tags (List of Strings). Finally add an `activity` subcollection with fields: userId (String), action (String), details (String), timestamp (Timestamp). In FlutterFlow, go to the Data section and add these as Firestore collections so you can bind them to queries.

Add a new page called ProjectList. Drag a ListView widget and bind it to a Backend Query on the `projects` collection filtered by arrayContains on memberIds matching the current user's UID. For each list item, add a Container with a Row containing the project name as a Text widget, a secondary Text showing the member count, and a Row of CircleImage widgets displaying the first 3 member avatars (query user docs by memberIds). Add a FloatingActionButton that opens a dialog to create a new project — set ownerId to the current user and add their UID to the memberIds array.

Add a ProjectBoard page that receives a projectId parameter. Add a horizontal ScrollView at the top level. Inside it, place four Column widgets side by side, each representing a status: To Do, In Progress, Review, and Done. Give each column a fixed width of 280px and a light background color. Inside each column, add a ListView bound to a Backend Query on the project's tasks subcollection filtered by status matching that column's value, ordered by priority. Each task card is a Container with the task title, assignee CircleImage, priority color-coded dot, and due date. Add a tap action on each card to navigate to a TaskDetail page.

Add an Add Task button at the bottom of the To Do column. On tap, open a BottomSheet with a form: TextField for title, TextField for description, a DropDown bound to the project's memberIds (display user names by querying user docs) for assignee selection, a ChoiceChips widget for priority (Low/Medium/High), and a DatePicker for due date. On submit, create a new document in the tasks subcollection with status set to 'todo' and the selected field values. Also create an activity log entry: '{userName} created task {taskTitle}'.

On the TaskDetail page, add a DropDown at the top with values: todo, inProgress, review, done. Bind it to the task's current status. On change, update the task document's status field and create a new activity log entry: '{userName} moved {taskTitle} to {newStatus}'. Below the task details, add a ListView bound to the project's activity subcollection ordered by timestamp descending. Each activity item shows a CircleImage of the user, the action text, and a relative timestamp. This gives the team a full audit trail of all project changes.

On the ProjectBoard page, add a Settings icon in the AppBar. On tap, navigate to a ProjectSettings page showing current members in a ListView with their name and role. Add an Invite button that opens a dialog with a TextField for email. On submit, query the users collection for that email, then add their UID to the project's memberIds array using arrayUnion. For Firestore Security Rules, add: allow read, write if request.auth.uid in resource.data.memberIds — this ensures only project members can access project data. For task subcollections, inherit the parent project's member check.