ClickUp

Log into ClickUp and open your profile settings by clicking your avatar in the bottom-left corner, then selecting 'Settings'. Scroll down to the 'Apps' section on the left sidebar and click it. At the bottom of the Apps page you will see an 'API Token' section with a 'Generate' or copy button. Click to reveal your token — it begins with `pk_` followed by a long alphanumeric string. Copy it. Before building anything, it helps to understand the ID chain you will navigate. Open your ClickUp workspace and look at the URL when you are viewing a task: `https://app.clickup.com/{teamId}/v/li/{listId}`. The `teamId` (Workspace ID) and `listId` are both visible in the URL. You can also find the List ID by right-clicking a List in the left sidebar and selecting 'Copy Link'. These IDs are what you will drill to via API calls. In FlutterFlow, go to App Settings → App Constants and add a constant named `clickupToken` set to your API token. Also add `clickupTeamId` — you can find this from the URL or from the GET /team call in the next step. In App State, create these variables to cache the hierarchy: `clickupSpaces` (type JSON, stores the spaces list), `clickupFolders` (type JSON), `clickupLists` (type JSON), and `clickupSelectedListId` (type String). You will populate these as the user navigates down the hierarchy. If you know exactly which List you want to display (for example, a client-specific deliverables tracker), you can hardcode that List ID as an App Constant and skip the hierarchy navigation entirely — jump straight to calling `GET /list/{listId}/task`.

In FlutterFlow, click 'API Calls' in the left navigation panel. Click '+ Add' → 'Create API Group'. Name it 'ClickUp'. Set the Base URL to `https://api.clickup.com/api/v2`. This next part is the most important configuration detail in the entire tutorial. Switch to the Headers section and add one header: - Key: `Authorization` - Value: `{{token}}` Notice there is NO 'Bearer' or 'Basic' prefix — just `{{token}}` by itself. ClickUp validates the token directly in the Authorization header value without any scheme prefix. If you add 'Bearer ' in front of the token, ClickUp returns 401 Unauthorized with an error that looks identical to a wrong-token error, making it very difficult to diagnose. Switch to the Variables tab and add a variable named `token` (type String, default: `FFAppConstants.clickupToken`). This propagates the token to every child API Call automatically. To verify the setup, add a quick test API Call inside the ClickUp group: name it 'Get Teams', method GET, endpoint `/team`. Run it in the Response tab. A successful response returns `{ "teams": [{ "id": "12345678", "name": "Your Workspace Name", ... }] }`. The `id` value is your Team ID — copy this and save it to the `clickupTeamId` App Constant. If you see a 401 response, double-check the Authorization header has no prefix before `{{token}}`.

1// API Group configuration reference:
2// Name:     ClickUp
3// Base URL: https://api.clickup.com/api/v2
4//
5// Headers:
6// Authorization: {{token}}   <-- NO 'Bearer ' prefix
7//
8// Group Variable:
9// token (String) — default: FFAppConstants.clickupToken
10//
11// Test call:
12// GET /team — returns { "teams": [{ "id": "...", "name": "..." }] }
13

Add three more API Calls to the ClickUp group to navigate the hierarchy. You will chain these calls using FlutterFlow's Action Flow — each call's result updates an App State variable and triggers a widget rebuild. API Call 1 — 'Get Spaces': Method GET, endpoint `/team/{{teamId}}/space`. Variable: `teamId` (String, default: `FFAppConstants.clickupTeamId`). Key JSON Paths: `$.spaces[*].id`, `$.spaces[*].name`. API Call 2 — 'Get Folders': Method GET, endpoint `/space/{{spaceId}}/folder`. Variable: `spaceId` (String). Key JSON Paths: `$.folders[*].id`, `$.folders[*].name`. API Call 3 — 'Get Lists': Method GET, endpoint `/folder/{{folderId}}/list`. Variable: `folderId` (String). Key JSON Paths: `$.lists[*].id`, `$.lists[*].name`, `$.lists[*].task_count`. Also add a 'Get Folderless Lists' call using `/space/{{spaceId}}/list` for Lists that sit directly in a Space without a Folder — this is common in smaller ClickUp setups. In FlutterFlow, create a navigation screen called 'Browse ClickUp'. Use a ListView bound to 'Get Spaces' as the backend query — tap a Space row to navigate to a Folder view. On the Folder screen, the Backend Query is 'Get Folders' with the selected Space ID passed as a Route Parameter. On the List screen, the Backend Query is 'Get Lists' with the Folder ID as a Route Parameter. For performance: when the user first taps a Space, store the Space ID in App State and store the entire folders response in `clickupFolders` App State. When they then tap a Folder, filter the locally cached folders list rather than making another API call. This converts three sequential API calls into one per navigation level, cutting requests significantly. Rate limit arithmetic: each navigation level costs one API call. Loading Spaces (1 call) + tapping a Space to load Folders (1 call) + tapping a Folder to load Lists (1 call) + loading Tasks for a List (1 call) = 4 calls total to reach any task. At 100 req/min, you can support 25 users simultaneously navigating without hitting the limit — comfortable for most team apps.

1// API Call reference — hierarchy navigation:
2//
3// Get Spaces:
4//   GET /team/{{teamId}}/space
5//   $.spaces[*].id, $.spaces[*].name
6//
7// Get Folders:
8//   GET /space/{{spaceId}}/folder
9//   $.folders[*].id, $.folders[*].name
10//
11// Get Lists (in folder):
12//   GET /folder/{{folderId}}/list
13//   $.lists[*].id, $.lists[*].name, $.lists[*].task_count
14//
15// Get Folderless Lists (directly in space):
16//   GET /space/{{spaceId}}/list
17//   $.lists[*].id, $.lists[*].name
18

Add one final API Call to the ClickUp group. Name it 'Get Tasks'. Set the method to GET. Add a variable named `listId` (type String). Set the endpoint to `/list/{{listId}}/task`. Optional but highly recommended query parameters to add as Variables: - `subtasks=true` — include subtasks - `include_closed=false` — hide completed tasks (defaults to false anyway) - `order_by=due_date` — sort by due date - `reverse=true` — show most-urgent first (earliest due date at top) Append these as: `/list/{{listId}}/task?order_by=due_date&reverse=true`. Key JSON Paths from the tasks response: - `$.tasks[*].id` — task ID for linking to detail or marking complete - `$.tasks[*].name` — task name - `$.tasks[*].status.status` — status name (e.g., 'to do', 'in progress', 'complete') - `$.tasks[*].status.color` — hex color code for the status badge - `$.tasks[*].due_date` — Unix timestamp in milliseconds (convert in a Custom Function) - `$.tasks[*].assignees[0].username` — first assignee's name - `$.tasks[*].priority.priority` — 'urgent', 'high', 'normal', 'low', or null Create a Task List screen in FlutterFlow. Pass the `listId` as a Route Parameter from the Lists screen. Add a ListView with Backend Query = 'Get Tasks', passing the listId Route Parameter. Inside each ListView item, create a Row containing: 1. A Container with background color set to `$.tasks[*].status.color` (as a hex color) for a visual status indicator 2. A Column with the task name (Text), assignee username (Text, smaller font), and due date (formatted Text) 3. A Checkbox or Icon Button to mark the task complete For the due date, ClickUp returns Unix timestamps in milliseconds. Add a Custom Function to convert this: `DateTime.fromMillisecondsSinceEpoch(int.parse(dueDateMs)).toString()` — or format it more nicely with a date format string. For the 'mark complete' action on the Checkbox: add a Backend API Call action that calls `PATCH /task/{{taskId}}` with a JSON body of `{"status": "complete"}`. Because this is a write operation, consider routing it through a Firebase Cloud Function to keep your API token out of the client. For internal team apps with trusted users, a direct PATCH call from FlutterFlow is acceptable.

1// Get Tasks API Call:
2// Method:   GET
3// Endpoint: /list/{{listId}}/task?order_by=due_date&reverse=true
4// Variable: listId (String)
5//
6// Key JSON Paths:
7// $.tasks[*].id
8// $.tasks[*].name
9// $.tasks[*].status.status
10// $.tasks[*].status.color
11// $.tasks[*].due_date        (Unix ms — convert with Custom Function)
12// $.tasks[*].assignees[0].username
13// $.tasks[*].priority.priority
14//
15// Custom Function — formatDueDate:
16// String formatDueDate(String dueDateMs) {
17//   if (dueDateMs.isEmpty) return 'No due date';
18//   final dt = DateTime.fromMillisecondsSinceEpoch(int.parse(dueDateMs));
19//   return '${dt.month}/${dt.day}/${dt.year}';
20// }
21

To add a task from FlutterFlow, create a simple form screen with fields for Task Name, Assignee (a dropdown populated from `GET /list/{listId}/member`), and Due Date (a Date Picker). The 'Add Task' button action calls `POST /list/{{listId}}/task` with a JSON body. For the task body, ClickUp expects specific field names. The minimum required body is `{ "name": "Task name" }`. Additional fields: `"due_date"` (Unix timestamp in ms as a number), `"assignees": [userId]`, `"status": "to do"`, and `"priority": 2` (1=urgent, 2=high, 3=normal, 4=low). In FlutterFlow's API Call configuration for POST /task, switch to the Body tab, set the body type to JSON, and add the fields as Variables. Use a `due_date` variable of type Integer to pass the Unix timestamp. You will need a Custom Function to convert the Date Picker's DateTime value to a Unix millisecond timestamp: `date.millisecondsSinceEpoch`. For rate limit management at 100 req/min: the key practices are (1) do not call hierarchy endpoints on every navigation — cache Space/Folder/List data in App State after the first load; (2) do not auto-refresh the task list on a timer — refresh only when the user pulls to refresh or navigates back to the screen; (3) if you need to load tasks across multiple Lists simultaneously (for a dashboard view), sequence the calls with a small delay between them using a Wait action in the Action Flow rather than firing them all in parallel. Also note that Custom Fields on tasks are returned as an array keyed by field ID, similar to Smartsheet's column IDs — use a Custom Function to extract specific custom field values by ID if needed.

1// POST /list/{listId}/task body reference:
2// {
3//   "name": "{{taskName}}",
4//   "assignees": [{{assigneeId}}],
5//   "due_date": {{dueDateMs}},
6//   "status": "{{status}}",
7//   "priority": {{priorityLevel}}
8// }
9//
10// Custom Function — dateToClickUpTimestamp:
11// int dateToClickUpTimestamp(DateTime date) {
12//   return date.millisecondsSinceEpoch;
13// }
14