Build a Kanban-style task board with a tasks collection storing title, description, status (todo, inProgress, done), priority, dueDate, and assigneeId. The board uses a horizontal ScrollView with three Column ListViews, one per status. Tasks move between columns via a long-press action menu that changes status. A FAB opens a quick-add Bottom Sheet, and overdue tasks highlight with red borders using Conditional Styling on dueDate comparisons. Each task detail page includes a comments subcollection for collaboration.
Building a Kanban Task Board in FlutterFlow
Task management apps help teams and individuals organize work visually. This tutorial builds a Kanban board with three columns (To Do, In Progress, Done), priority-coded task cards, due date alerts, quick-add functionality, and a task detail page with comments. It suits personal productivity apps, team project boards, and freelancer workflow tools.
Prerequisites
- A FlutterFlow project with Firebase Authentication enabled
- Firestore database set up in your Firebase project
- Basic familiarity with FlutterFlow ListView, Conditional Styling, and Bottom Sheets
- Understanding of Firestore queries with where and orderBy clauses
Step-by-step guide
Create the tasks collection schema
Create the tasks collection schema
Create a Firestore tasks collection with fields: title (String), description (String), status (String: 'todo', 'inProgress', 'done'), priority (String: 'low', 'medium', 'high'), assigneeId (String, userId), dueDate (Timestamp, nullable), projectId (String, for multi-project support), createdAt (Timestamp), and completedAt (Timestamp, nullable, set when moved to done). Under each task, create a comments subcollection with fields: text (String), authorId (String), timestamp (Timestamp). Use an Option Set for status values and another for priority values.
Expected result: Firestore has a tasks collection with status, priority, and dueDate fields, plus a comments subcollection for each task.
Build the Kanban board with three scrollable columns
Build the Kanban board with three scrollable columns
Create a TaskBoard page. Add a horizontal ScrollView as the main content area. Inside, add a Row with three Column widgets, each with a fixed width of about 300 pixels. Label each column with a header Container: 'To Do' (grey), 'In Progress' (blue), 'Done' (green). Inside each Column, add a ListView with a Backend Query filtering tasks where status equals the column's status value, ordered by createdAt ascending. Each list item is a task card Container showing the title, a colored left border for priority (red=high, orange=medium, green=low), and the due date if set.
Expected result: The board displays three columns that scroll horizontally. Each column shows tasks matching its status, with priority-colored borders on each card.
Add task status change via long-press action menu
Add task status change via long-press action menu
On each task card Container, add a Long Press action that opens an Alert Dialog or Bottom Sheet with status options. Display three buttons: 'Move to To Do', 'Move to In Progress', and 'Move to Done'. Each button triggers an Update Document action that changes the task's status field to the selected value. When moving to 'done', also set completedAt to the current timestamp. When moving away from 'done', clear completedAt. After the update, the Backend Queries on the columns automatically refresh, and the task appears in the correct column.
Expected result: Long-pressing a task opens a menu to change its status. The task moves to the appropriate column after the status update.
Highlight overdue tasks with Conditional Styling
Highlight overdue tasks with Conditional Styling
On each task card Container, add Conditional Styling. Set the condition: if dueDate is not null AND dueDate is before the current timestamp AND status is not 'done', apply a red border (2px solid red) and a light red background tint. This visually flags overdue tasks that need attention. Also add a Text widget below the due date that shows 'Overdue' in red when this condition is true. For tasks due today, use an amber/yellow border instead by adding a second condition checking if dueDate falls within today's date range.
Expected result: Overdue tasks display a red border and 'Overdue' label. Tasks due today show an amber border. Completed tasks show no urgency styling.
Add quick-add FAB and task detail page with comments
Add quick-add FAB and task detail page with comments
Add a FloatingActionButton to the TaskBoard page. On tap, open a Bottom Sheet with a compact form: title TextField (required), priority ChoiceChips (default medium), optional dueDate DateTimePicker. On submit, create a task document with status 'todo' and the entered fields. The task immediately appears in the To Do column. Create a TaskDetail page that receives a taskId parameter. Display the full task info with an edit button, and below it a comments ListView from the task's comments subcollection ordered by timestamp ascending. Add a TextField + Send button at the bottom to post new comments.
Expected result: The FAB opens a quick-add form that creates tasks in the To Do column. The task detail page shows full info and a comment thread for collaboration.
Complete working example
1// Task Management App — Action Flow Summary23// TASK BOARD PAGE:4// Layout: horizontal ScrollView → Row → 3 Columns (To Do | In Progress | Done)5// Each Column:6// Header Container (status label + task count)7// ListView Backend Query: tasks WHERE status == 'todo'/'inProgress'/'done'8// ORDER BY createdAt ASC9// Each task card:10// Container with left border color = priority (red/orange/green)11// Title Text + Due Date Text12// Conditional Styling: red border if overdue, amber if due today13// Long Press → Show Bottom Sheet (status change options)1415// LONG PRESS — STATUS CHANGE:16// 1. Show Bottom Sheet with 3 buttons:17// a. Move to To Do → Update Document: status = 'todo', completedAt = null18// b. Move to In Progress → Update Document: status = 'inProgress', completedAt = null19// c. Move to Done → Update Document: status = 'done', completedAt = now20// 2. Close Bottom Sheet21// 3. ListView auto-refreshes via Backend Query2223// FAB — QUICK ADD:24// 1. Show Bottom Sheet:25// - TextField: title (required, validate non-empty)26// - ChoiceChips: priority (low/medium/high, default medium)27// - DateTimePicker: dueDate (optional)28// 2. Submit button:29// a. Create Document: tasks → {30// title, priority, dueDate,31// status: 'todo', assigneeId: currentUser.uid,32// createdAt: now, completedAt: null33// }34// b. Close Bottom Sheet35// c. Show SnackBar: 'Task created'3637// TASK DETAIL PAGE:38// Page Parameter: taskId39// Backend Query: tasks/{taskId}40// Display: title, description, status badge, priority badge, due date, assignee41// Edit button → Navigate to TaskEdit page42// Comments section:43// ListView Backend Query: tasks/{taskId}/comments ORDER BY timestamp ASC44// Each comment: author avatar + name + text + time45// Bottom Row: TextField + Send IconButton46// Send action: Create Document → tasks/{taskId}/comments → {47// text, authorId: currentUser.uid, timestamp: now48// }Common mistakes when creating a Task Management or Productivity App Using FlutterFlow
Why it's a problem: Using horizontal ScrollView with fixed-width columns that do not fit on mobile
How to avoid: Ensure the horizontal ScrollView is enabled and each Column has a fixed width (280-320px). On mobile, users scroll horizontally to see all columns. Consider a tab-based layout alternative for very small screens.
Why it's a problem: Not setting completedAt when moving tasks to the Done column
How to avoid: When status changes to 'done', set completedAt to the current timestamp. When moving back from done, clear completedAt to null.
Why it's a problem: Querying all tasks without filtering by the current user or project
How to avoid: Add assigneeId == currentUser or projectId == selectedProject to every column's Backend Query filter.
Best practices
- Use a colored left border on task cards to indicate priority at a glance (red=high, orange=medium, green=low)
- Show task count in each column header so users know the distribution without counting
- Add Conditional Styling for overdue (red) and due-today (amber) tasks for urgency awareness
- Use a Bottom Sheet for quick-add instead of a full page to keep the flow fast
- Store completedAt timestamps to enable productivity analytics and completion time tracking
- Add a search TextField above the board to filter tasks by title across all columns
- Support keyboard shortcuts or swipe gestures for rapid status changes on mobile
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to build a Kanban task management app in FlutterFlow with three columns (To Do, In Progress, Done). Show me the Firestore schema for tasks with priority and due dates, the horizontal ScrollView layout with per-status ListViews, and the long-press action flow for changing task status between columns.
Create a task board page with a horizontal scrolling Row of three columns labeled To Do, In Progress, and Done. Each column has a ListView of task cards filtered by status. Add a FAB that opens a Bottom Sheet for quick task creation.
Frequently asked questions
Can I add drag-and-drop between Kanban columns?
FlutterFlow does not natively support drag-and-drop between ListViews. You can implement it with a Custom Widget using flutter_reorderable_grid_view or LongPressDraggable, but the long-press action menu approach is simpler and works reliably.
How do I add subtasks to a task?
Create a subtasks subcollection under each task document with title, isCompleted, and order fields. Display them as a CheckboxListTile list on the task detail page with completion tracking.
Can multiple users collaborate on the same task board?
Yes. Use a projects collection with a memberIds array. Filter the task board by projectId, and all project members see the same tasks. Real-time queries keep everyone in sync.
How do I track time spent on each task?
Add a timeSpentMinutes field to the task document and a Timer action on the task detail page. Start and stop buttons update a running timer, and the elapsed time is saved to Firestore when stopped.
Can I add recurring tasks that reset automatically?
Yes. Add a recurrence field (daily, weekly, monthly) and a Cloud Function that runs on a schedule. When a recurring task is completed, the function creates a new task with the same details and the next due date.
Can RapidDev help build a team project management platform?
Yes. RapidDev can implement a full project management system with multiple boards, team assignments, Gantt charts, time tracking, reporting dashboards, and integrations with tools like Slack and GitHub.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation