Todoist

Open Todoist in your browser and go to Settings (click your profile picture in the top right → Settings). Navigate to the Integrations tab. Scroll down to find the Developer section, which contains your personal API token — a 40-character hexadecimal string. Click the Copy button next to the token to copy it to your clipboard. This is a long-lived static token that doesn't expire unless you manually revoke it from the same settings page. Treat it like a password. The personal API token gives full read and write access to your entire Todoist account: all projects, tasks, labels, sections, filters, and comments. For a personal task app where you're the only user, this is exactly what you want. For a multi-user app where each user sees their own Todoist data, each user would need to authenticate with their own token via OAuth — a more complex flow not covered in this tutorial, which focuses on a single-account setup. Note the rate limit: Todoist enforces 450 requests per 15-minute window on most plans. That's 30 requests per minute — plenty for personal use, but worth keeping in mind if your app makes many calls per page load.

In FlutterFlow, click API Calls in the left navigation sidebar. Click + Add → Create API Group. Name the group Todoist. Set the Base URL to https://api.todoist.com/rest/v2 — this covers all Todoist REST API v2 endpoints: tasks, projects, sections, labels, and comments. Add the group-level Authorization header. In the Headers section, click Add Header. Set the key to Authorization. For the value, you have two options: Option A (simpler): type Bearer followed by a space and then paste your actual API token directly. Example: Bearer abc123yourtokenhere. Option B (recommended): go to Settings → App Values (App Constants) first, create a constant named TODOIST_TOKEN with your token value, then set the header value to Bearer {{TODOIST_TOKEN}}. This way if you need to update the token later, you change one constant instead of hunting through API Call configurations. Save the API Group. With this header set at the group level, every API Call you create inside the Todoist group will automatically send the Authorization header without any additional configuration per call.

1// API Group configuration reference
2// Group name: Todoist
3// Base URL: https://api.todoist.com/rest/v2
4// Headers (inherited by all child calls):
5// Authorization: Bearer {{TODOIST_TOKEN}}
6// Content-Type: application/json

Inside the Todoist group, click Add API Call. Name it GetTasks. Set the method to GET. For the endpoint, use: /tasks?filter={{taskFilter}}. Now add a variable named taskFilter with type String and a default value of today | overdue. This default will show tasks due today and any overdue tasks — the most useful starting view for a personal task app. Todoist's filter syntax is powerful: - today | overdue — tasks due today or past due - today — only today's tasks - @work — tasks with the 'work' label - p1 — priority 1 tasks - assigned to: me — tasks assigned to you in shared projects - due before: +7 days — tasks due in the next week By exposing the filter as a variable, a single GetTasks API Call can power multiple views in your app (a tab bar, a segmented control, or a filter dropdown) just by changing the filter string passed to the call. Go to Response & Test. Paste a sample task response and click Generate from Response. Key JSON Paths: - $[*].content → the task text - $[*].due.date → due date (IMPORTANT: this is nested under 'due', which can be null) - $[*].priority → priority number (1-4) - $[*].project_id → the project this task belongs to - $[*].id → task ID (needed for complete/update calls) Test the call with a real filter string. You should see your actual Todoist tasks in the response.

1// GET /tasks?filter=today%20%7C%20overdue
2// (URL-encoded: today | overdue)
3
4// Sample Todoist tasks response — flat array, no envelope
5[
6  {
7    "id": "2995104339",
8    "content": "Write weekly report",
9    "description": "",
10    "project_id": "2203306141",
11    "section_id": null,
12    "parent_id": null,
13    "order": 1,
14    "priority": 4,
15    "due": {
16      "string": "today at 9am",
17      "date": "2026-07-10",
18      "datetime": "2026-07-10T09:00:00Z",
19      "is_recurring": false,
20      "timezone": "America/New_York"
21    },
22    "is_completed": false,
23    "labels": ["work"]
24  },
25  {
26    "id": "2995104340",
27    "content": "Call plumber",
28    "description": "",
29    "project_id": "2203306142",
30    "section_id": null,
31    "parent_id": null,
32    "order": 2,
33    "priority": 1,
34    "due": null,
35    "is_completed": false,
36    "labels": ["personal"]
37  }
38]
39
40// Key JSON Paths
41// $[*].content         → task text
42// $[*].due.date        → due date (CAREFUL: due can be null)
43// $[*].due.datetime    → due date+time (null if no time set)
44// $[*].priority        → 1 (normal) to 4 (urgent)
45// $[*].id              → task ID for close/update calls
46// $[*].is_completed    → boolean

On your main tasks page in FlutterFlow, add a ListView. Set its Backend Query to Todoist group → GetTasks. Pass the filter string you want for this page as the taskFilter variable (e.g., 'today | overdue'). Inside the ListView, add a ListTile or Card widget as the child. Add Text widgets for: - Task content: bind to $[*].content - Due date: bind to $[*].due.date — BUT this requires special handling - Priority: use a Conditional Widget or color-code based on $[*].priority value The due date binding is the critical part. The due field itself can be null for tasks without a due date — tasks like 'Call plumber someday' have no due date at all. In Dart/Flutter (and FlutterFlow), accessing .date on a null object causes a 'Null check operator used on a null value' error that crashes the widget. In FlutterFlow, handle this by wrapping the due date Text widget in a Conditional Widget. Set the condition to: API Response → GetTasks → $[*].due != null. Show the due date Text only when due is not null; show a different widget (e.g., Text('No due date') in gray) when it is null. For the priority display, add a Container or Icon and color-code it based on the priority value: 4 = red (urgent), 3 = orange (high), 2 = blue (medium), 1 = gray (normal). Use FlutterFlow's Conditional Color feature or a Custom Function to map priority numbers to colors. Test in Run Mode to see your actual Todoist tasks displayed in the app.

Completing a task in Todoist uses the endpoint POST /tasks/{id}/close. This endpoint returns HTTP 204 No Content with an empty body — it doesn't send back any JSON. This is an important difference from most API responses you've configured so far. Add a new API Call inside the Todoist group. Name it CloseTask. Method: POST. Endpoint: /tasks/{{taskId}}/close. Add a variable named taskId. In the Response & Test tab, DO NOT paste a sample response and DO NOT generate JSON Paths. Leave the response mapping completely empty. FlutterFlow will flag an issue if you try to map a response from an endpoint that returns nothing. Instead, treat any 2xx response as success. In your task ListView, add a Checkbox or circle Checkmark button to each task row. Wire its on-tap Action to Backend/API Call → CloseTask, passing the current row's $[*].id as taskId. After a successful call, either: - Remove the item from the list using App State manipulation, or - Trigger a page refresh to re-fetch the task list For creating tasks, add a POST /tasks API Call. Method: POST. Endpoint: /tasks. Body: {"content": "{{taskContent}}", "due_string": "{{dueString}}", "priority": {{priority}}}. The due_string can be natural language like 'tomorrow at 9am' or 'next Monday' — Todoist parses it automatically. Rate limit awareness: 450 requests per 15 minutes means you can complete about 450 tasks per 15 minutes before hitting limits. For personal apps, this is essentially unlimited. If you're building a team app where multiple users share one token (not recommended), be mindful of the cumulative rate.

1// POST /tasks/{taskId}/close — complete a task
2// Returns: 204 No Content (empty body)
3// DO NOT configure response mapping for this call
4// Treat any 2xx response as success
5
6// POST /tasks — create a new task
7// Method: POST
8// Endpoint: /tasks
9// Body:
10{
11  "content": "{{taskContent}}",
12  "due_string": "{{dueString}}",
13  "priority": 4,
14  "project_id": "{{projectId}}",
15  "labels": ["{{label}}"]
16}
17// due_string accepts natural language: 'today', 'tomorrow', 'next Monday at 9am'
18// priority: 1=normal, 2=medium, 3=high, 4=urgent
19
20// GET /projects — list all projects
21// Method: GET, Endpoint: /projects
22// Response: flat array, same structure as tasks
23// $[*].id    → project ID
24// $[*].name  → project name
25// $[*].color → color label