# How to Create a Task Management or Productivity App Using FlutterFlow

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `FlutterFlow Action Flow`

```text
// Task Management App — Action Flow Summary

// TASK BOARD PAGE:
// Layout: horizontal ScrollView → Row → 3 Columns (To Do | In Progress | Done)
// Each Column:
//   Header Container (status label + task count)
//   ListView Backend Query: tasks WHERE status == 'todo'/'inProgress'/'done'
//     ORDER BY createdAt ASC
//   Each task card:
//     Container with left border color = priority (red/orange/green)
//     Title Text + Due Date Text
//     Conditional Styling: red border if overdue, amber if due today
//     Long Press → Show Bottom Sheet (status change options)

// LONG PRESS — STATUS CHANGE:
// 1. Show Bottom Sheet with 3 buttons:
//    a. Move to To Do → Update Document: status = 'todo', completedAt = null
//    b. Move to In Progress → Update Document: status = 'inProgress', completedAt = null
//    c. Move to Done → Update Document: status = 'done', completedAt = now
// 2. Close Bottom Sheet
// 3. ListView auto-refreshes via Backend Query

// FAB — QUICK ADD:
// 1. Show Bottom Sheet:
//    - TextField: title (required, validate non-empty)
//    - ChoiceChips: priority (low/medium/high, default medium)
//    - DateTimePicker: dueDate (optional)
// 2. Submit button:
//    a. Create Document: tasks → {
//         title, priority, dueDate,
//         status: 'todo', assigneeId: currentUser.uid,
//         createdAt: now, completedAt: null
//       }
//    b. Close Bottom Sheet
//    c. Show SnackBar: 'Task created'

// TASK DETAIL PAGE:
// Page Parameter: taskId
// Backend Query: tasks/{taskId}
// Display: title, description, status badge, priority badge, due date, assignee
// Edit button → Navigate to TaskEdit page
// Comments section:
//   ListView Backend Query: tasks/{taskId}/comments ORDER BY timestamp ASC
//   Each comment: author avatar + name + text + time
//   Bottom Row: TextField + Send IconButton
//   Send action: Create Document → tasks/{taskId}/comments → {
//     text, authorId: currentUser.uid, timestamp: now
//   }
```

## Common mistakes

- **Using horizontal ScrollView with fixed-width columns that do not fit on mobile** — Three 300px columns total 900px which exceeds most phone screens, but without horizontal scrolling enabled the layout breaks or overflows. Fix: 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.
- **Not setting completedAt when moving tasks to the Done column** — Without a completion timestamp, you cannot track how long tasks took to complete or generate productivity reports. Fix: When status changes to 'done', set completedAt to the current timestamp. When moving back from done, clear completedAt to null.
- **Querying all tasks without filtering by the current user or project** — In a multi-user app, showing all tasks from all users clutters each person's board with irrelevant items. Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-task-management-or-productivity-app-using-flutterflow
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-task-management-or-productivity-app-using-flutterflow