Airtable

Sign in to Airtable and open your account page at airtable.com/create/tokens. Click 'Create new token', give it a descriptive name like 'FlutterFlow Read Token', and under Scopes select 'data.records:read'. Under Access, choose 'Only the following bases' and select your base — this limits the blast radius if the token is ever exposed. Click 'Create token' and copy the value immediately; Airtable shows it only once. If you also need to create or update records, create a second, separate token with 'data.records:write' scope. Keep that write token exclusively for your Firebase Cloud Function — never paste it into FlutterFlow. Think of the read token as a library card and the write token as a master key: the library card can live in the app because it can only read; the master key stays locked in your server environment. Record your Base ID as well. You can find it in the Airtable URL when viewing your base — it starts with 'app' followed by alphanumeric characters, for example `appXXXXXXXXXXXXXX`. You'll need both the Base ID and the table name (exactly as it appears in Airtable, spaces and all) when configuring the API Group.

Open your FlutterFlow project and click 'API Calls' in the left navigation panel. Click '+ Add' and choose 'Create API Group'. Name it 'Airtable', set the Base URL to `https://api.airtable.com/v0/{baseId}` — replace `{baseId}` with your actual Base ID right here in the URL so you don't have to pass it as a variable on every call. Scroll to the Headers section and add a header: Key = `Authorization`, Value = `Bearer YOUR_READ_TOKEN_HERE`. Paste the actual token value directly. While it's true that a read-only token scoped to a single base is lower-risk than a write token, treat it as a secret and make sure you understand that it will be compiled into the app bundle — anyone who decompiles the APK can extract it. For most read-only display use-cases with a tightly scoped token this is an acceptable trade-off, but you should rotate the token periodically. Now click '+ Add' again inside the API Group to add your first API Call. Name it 'ListRecords'. Set the Method to GET and the API URL to `/{tableName}` — replace `{tableName}` with your exact table name (URL-encode any spaces as `%20`, or better yet rename the table in Airtable to remove spaces). Switch to the Variables tab and add a variable named `maxRecords` with a default of `100` so you can control page size. Add `?maxRecords={{maxRecords}}` to the URL query string.

1{
2  "method": "GET",
3  "url": "https://api.airtable.com/v0/{baseId}/{tableName}?maxRecords=100",
4  "headers": {
5    "Authorization": "Bearer YOUR_READ_TOKEN"
6  }
7}

With the ListRecords call open, click the 'Response & Test' tab. Click 'Test API Call' — FlutterFlow will fire the actual GET request to Airtable and display the raw JSON response in the panel. You should see a structure like this: `{ "records": [ { "id": "recXXX", "createdTime": "2024-01-01T00:00:00.000Z", "fields": { "Name": "Example", "Price": 29.99 } } ] }`. If the response shows `{ "error": { "type": "NOT_FOUND" } }` check that your Base ID and table name are correct. If you see a 401, the token is missing or malformed — re-check the Authorization header. Once you have a successful response, click 'Add JSON Path' to extract the fields you want. For the record ID use `$.records[:].id`. For each column in your table, use `$.records[:].fields.{ColumnName}` — for example `$.records[:].fields.Name` and `$.records[:].fields.Price`. The `[:]` slice notation extracts the value from every record in the array, giving you a list. FlutterFlow will show a preview of extracted values on the right. Add as many paths as columns you need to display. Name each one descriptively, for example `recordId`, `productName`, `productPrice`.

Creating a reusable Data Type makes it easy to pass Airtable records between widgets. In the left navigation, go to 'Data Types' and click '+ Add Data Type'. Name it 'AirtableRecord'. Add fields matching the JSON Paths you just created — for example `recordId` (String), `productName` (String), `productPrice` (double). Now drag a ListView widget onto your canvas. Select the ListView and open the Backend Query section in the right panel. Click '+ Add Query', choose 'API Call', and select your 'Airtable → ListRecords' call. FlutterFlow will let you map the JSON Path variables to the Data Type fields you just created — match `recordId` to `$.records[:].id`, `productName` to `$.records[:].fields.Name`, and so on. Inside the ListView, add a ListTile or Card widget. Use the 'Set Variable' bindings to reference the current list item's fields — click the binding icon on the Title field of the ListTile, choose 'List Item', and select `productName`. Do the same for subtitle, price, or any other field. Run the app in Test Mode or on a connected device and your Airtable data should appear as a scrollable list. Airtable returns up to 100 records per request by default; if you have more than 100 records, see the pagination note in the troubleshooting section.

Creating or updating Airtable records requires sending a POST or PATCH request with a write-scope PAT in the Authorization header. That write token must never be stored in FlutterFlow or compiled into the app. The solution is a Firebase Cloud Function that receives a simple JSON payload from FlutterFlow and makes the authenticated Airtable call server-side. In the Firebase console, create a new Cloud Function (Node.js 18 or 20). The function reads the incoming JSON body, validates it, and calls the Airtable API with your write token stored in a Firebase environment secret — never hardcoded. The function returns a 200 with the Airtable response or a 4xx/5xx on error. Back in FlutterFlow, create a new API Call inside your Airtable group named 'CreateRecord'. Set the Method to POST, and the URL to your deployed Cloud Function URL (e.g. `https://us-central1-yourproject.cloudfunctions.net/createAirtableRecord`). Add a JSON Body variable with keys matching what your function expects (`tableName`, `fields`). Trigger this call from an Action Flow on a form's submit button — the write PAT never touches the device. If you'd rather skip building the proxy yourself, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function (index.js)
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5exports.createAirtableRecord = functions.https.onRequest(async (req, res) => {
6  // Set CORS headers
7  res.set('Access-Control-Allow-Origin', '*');
8  if (req.method === 'OPTIONS') {
9    res.set('Access-Control-Allow-Methods', 'POST');
10    res.set('Access-Control-Allow-Headers', 'Content-Type');
11    return res.status(204).send('');
12  }
13
14  const { tableName, fields } = req.body;
15  const BASE_ID = functions.config().airtable.base_id;
16  const WRITE_TOKEN = functions.config().airtable.write_token;
17
18  try {
19    const response = await axios.post(
20      `https://api.airtable.com/v0/${BASE_ID}/${encodeURIComponent(tableName)}`,
21      { fields },
22      { headers: { Authorization: `Bearer ${WRITE_TOKEN}`, 'Content-Type': 'application/json' } }
23    );
24    return res.status(200).json(response.data);
25  } catch (err) {
26    const status = err.response?.status || 500;
27    return res.status(status).json({ error: err.message });
28  }
29});

Airtable returns a maximum of 100 records per request. If your table has more, the response includes an `offset` string at the top level: `{ "records": [...], "offset": "itr..." }`. To fetch the next page, add `?offset={offset}` to your next request. FlutterFlow does not auto-paginate, so you'll need to manage this manually with App State. Add an App State variable called `airtableOffset` (String, nullable). After your ListRecords call completes, check if the response includes an `$.offset` JSON Path. If it does, store it in `airtableOffset` and show a 'Load more' button. The button triggers the ListRecords call again with the offset variable appended to the URL. Append the new records to your existing list in App State rather than replacing it. For rate-limit management, Airtable allows 5 requests per second per base. If you build a screen that fires multiple API calls simultaneously (for example, fetching detail data for each list item separately), you will hit 429 errors very quickly. The fix is to fetch all the data you need in a single list call and display it from that single response. Cache the full response in App State so navigating back to the list doesn't fire the API again. If a 429 does occur, Airtable locks out requests for 30 seconds — add a retry delay in your Action Flow rather than retrying immediately. Also watch for field names with emoji or special characters — these break JSON Path bindings silently. In the Airtable base settings, rename columns to plain ASCII strings before building the integration.