Notion

Go to notion.so/my-integrations in your browser and click '+ New integration'. Give it a name like 'FlutterFlow App', select your workspace, and set the capabilities you need — at minimum 'Read content'. For apps that create or update pages, also enable 'Insert content' and 'Update content'. Click Submit, then copy the 'Internal Integration Token' shown on the next screen — this is your secret that authenticates API calls. Now go to the Notion database you want the app to read. Open it in full-page view, click the three-dot '...' menu in the top-right corner, and scroll to 'Connections'. Click 'Add connections', search for the integration name you just created, and click 'Confirm'. This sharing step is what most developers miss — without it, the API returns a 404 'Could not find database with ID' error regardless of how valid your token is. Note the database ID from the URL: when you open a Notion database in your browser, the URL looks like `notion.so/workspace/DATABASE-ID?v=VIEW-ID`. The DATABASE-ID is a 32-character string (with hyphens like a UUID). Copy it — you'll use it in the Cloud Function to specify which database to query.

Deploy a Firebase Cloud Function that handles two jobs: proxying the request to Notion with the integration token in the Authorization header, and flattening Notion's deeply nested property JSON into a simple array of objects. Notion's raw API response for a database query looks like this: `results[].properties.Name.title[0].plain_text` for a title field, or `results[].properties.Body.rich_text[0].plain_text` for a text field. Trying to write JSON paths like `$.results[*].properties.Name.title[0].plain_text` in FlutterFlow's binding tool is tedious and breaks whenever you add or rename a database column. The smarter approach: the Cloud Function parses the raw Notion response and returns a simplified array like `[{"title": "...", "body": "...", "date": "...", "id": "..."}]`. FlutterFlow then just needs simple paths like `$[*].title`. Deploy this function with your Notion token stored as a Firebase Functions config variable (never in source code): run `firebase functions:config:set notion.token="your-token" notion.database_id="your-db-id"` then deploy.

1// Firebase Cloud Function — Notion headless CMS proxy
2// index.js
3const functions = require('firebase-functions');
4const https = require('https');
5
6exports.notionQuery = functions.https.onRequest((req, res) => {
7  res.set('Access-Control-Allow-Origin', '*');
8  res.set('Access-Control-Allow-Methods', 'POST, OPTIONS');
9  res.set('Access-Control-Allow-Headers', 'Content-Type');
10  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
11
12  const token = functions.config().notion.token;
13  const dbId = functions.config().notion.database_id;
14  const body = JSON.stringify({ page_size: 50 });
15
16  const options = {
17    hostname: 'api.notion.com',
18    path: `/v1/databases/${dbId}/query`,
19    method: 'POST',
20    headers: {
21      'Authorization': `Bearer ${token}`,
22      'Notion-Version': '2022-06-28',
23      'Content-Type': 'application/json',
24      'Content-Length': Buffer.byteLength(body)
25    }
26  };
27
28  const proxyReq = https.request(options, (proxyRes) => {
29    let data = '';
30    proxyRes.on('data', chunk => { data += chunk; });
31    proxyRes.on('end', () => {
32      const json = JSON.parse(data);
33      // Flatten Notion's nested properties to simple objects
34      const items = (json.results || []).map(page => ({
35        id: page.id,
36        title: page.properties?.Name?.title?.[0]?.plain_text || '',
37        body: page.properties?.Body?.rich_text?.[0]?.plain_text || '',
38        tags: (page.properties?.Tags?.multi_select || []).map(t => t.name).join(', '),
39        date: page.properties?.Date?.date?.start || ''
40      }));
41      res.status(200).json({ items });
42    });
43  });
44  proxyReq.on('error', (e) => res.status(500).json({ error: e.message }));
45  proxyReq.write(body);
46  proxyReq.end();
47});

In FlutterFlow, click 'API Calls' in the left navigation panel. Click '+ Add' and choose 'Create API Group'. Name the group 'Notion' and set the Base URL to your Cloud Function's HTTPS trigger URL (e.g., `https://us-central1-your-project.cloudfunctions.net/notionQuery`). No shared headers are needed at the group level — the function handles Notion auth internally. Click '+ Add API Call' inside the Notion group. Name this call 'Query Database'. Set the Method to POST. Leave the endpoint path blank (the function is at the root URL). In the Headers tab, add a `Content-Type` header with value `application/json` — this is needed because you're sending a POST body, even if it's empty from FlutterFlow's side (the function uses its own hardcoded database ID). Click 'Response & Test' and paste a sample response from your Cloud Function in the Response Body field. A sample looks like: `{"items": [{"id": "abc", "title": "Example Entry", "body": "Content here", "tags": "News", "date": "2026-03-15"}]}`. Click 'Generate JSON Paths' — FlutterFlow will identify `$.items[*].id`, `$.items[*].title`, `$.items[*].body`, `$.items[*].tags`, and `$.items[*].date` as bindable paths. Click 'Test API Call' to verify the live connection returns data.

Go to Settings → Data Types → + Add Data Type. Name it 'NotionItem'. Add the following fields: `id` (String), `title` (String), `body` (String), `tags` (String), `date` (String). These match the flattened output from your Cloud Function. Now open your list screen in FlutterFlow. Add a ListView widget to the page. In the ListView's 'Backend Query' panel on the right, set the query type to 'API Call' and select your 'Query Database' call. Under 'JSON Path', map the response to your NotionItem Data Type by linking each JSON path to its corresponding field: `$.items[*].title` → title, `$.items[*].body` → body, and so on. Inside the ListView, build your list item widget. Add a Column widget as the list item container. Inside the column, add a Text widget for the title — in its properties, click the binding icon (orange lightning bolt) and select the current list item's `title` field. Add another Text widget below it for the body preview (use a `maxLines` property to limit to 2 lines and show '...' for overflow). Add a third Text widget for the date. For a blog-style detail screen: wire the list item's On Tap action to navigate to a detail page, passing the entire NotionItem as a page parameter. On the detail page, render the `body` field in a larger Text widget. If you need formatted rich text (bold, italic, links), you'll need to fetch the full page blocks from Notion's /blocks endpoint and render them — keep that for a follow-up iteration.

If your use case requires users to add entries to the Notion database from the app — submitting a support request, adding a task, logging a form response — you need to extend the Cloud Function with a write path. The same integration token works for writes, provided you enabled 'Insert content' capability when creating the integration at notion.so/my-integrations. Add a second export to your Cloud Function named `notionCreate` (or handle POST vs GET in the same function with a method check). This function receives the new page's properties as a JSON body from FlutterFlow, then calls `POST /v1/pages` on the Notion API with the parent database ID and the properties object. The properties must match Notion's typed format: a title field is `{"title": [{"text": {"content": "Your value"}}]}`, not just a plain string. In FlutterFlow, add a second API Call named 'Create Page' in your Notion API Group. Set the Method to POST. In the Body tab, add the properties JSON as a variable — use FlutterFlow's Variables tab to define a `properties` variable (JSON type) and reference it as `{{ properties }}` in the body. Wire this API Call to a form's submit button via the Action Flow Editor: Form Submit → Add Action → Backend/API Call → Notion / Create Page. For the Notion-Version header: both the query and create calls must include `Notion-Version: 2022-06-28` in the request headers. Add this in the proxy function headers, not in FlutterFlow's API Call config — keeping all Notion-specific headers server-side simplifies future version updates.