PostgreSQL

Before writing a single line of code, decide which path fits your situation. If you are starting a new project or are willing to use Supabase as your Postgres host, use the native Supabase path — it takes about 30 minutes, requires no backend code, and gives you authentication, Row Level Security, real-time subscriptions, and file storage as bonuses. Open FlutterFlow, go to Settings & Integrations → Supabase, paste your Project URL and Anon Key, and FlutterFlow is connected. Skip ahead to Step 3 if you choose this path. If your PostgreSQL database is already running somewhere else — Neon, RDS, a VPS, or another cloud — you must use the Cloud Function proxy path. You cannot connect FlutterFlow directly to those databases. The Cloud Function path takes about 60 minutes, requires a Firebase Blaze plan (pay-as-you-go), and some familiarity with JavaScript. You'll write a small Node.js function, deploy it to Firebase, and call it from a FlutterFlow API Group. A third path exists on paper: the Dart `postgres` pub.dev package in a Custom Action. This opens a TCP socket to port 5432. It works only on mobile and desktop — the web build throws a 'Unsupported operation: Socket' error. More critically, your database password sits in client code and ships to every user. This path is not recommended for production under any circumstances. We mention it only so you know why to avoid it, not how to use it.

If you chose the Supabase path, here is how to connect it. In your FlutterFlow project, open the left navigation and scroll down to 'Settings & Integrations'. Click 'Supabase'. Toggle the switch to enable Supabase. Paste your Supabase Project URL (format: `https://xxxxxxxxxxxxxxxxxxxx.supabase.co`) and your Supabase Anon Key. Both values are in your Supabase dashboard under Project Settings → API. Click 'Get Schema' — FlutterFlow will query your Supabase database schema and import all your table definitions, column names, and types into the FlutterFlow data model. Once the schema is imported, you can see all your tables in the FlutterFlow Data panel. To query a table, add a Backend Query to any widget: select the widget, open the Backend Query section in the right panel, click '+ Add Query', and choose 'Supabase Query'. Pick your table, optionally add filter conditions (e.g. filter `user_id = currentUser.uid` for per-user data), set sort order, and apply pagination. FlutterFlow generates the PostgREST API call automatically — you never write SQL or see the Supabase URL directly. For Row Level Security: go to your Supabase dashboard, open Table Editor → your table → RLS, and enable RLS. Add a policy like 'Users can read their own rows' with filter `auth.uid() = user_id`. FlutterFlow's Supabase calls will respect these policies automatically when the user is authenticated through Supabase Auth.

If you are using a non-Supabase PostgreSQL host, this step creates the backend bridge. Create a new Firebase Cloud Function in your Firebase project. The function uses the `pg` npm package to open an SSL-encrypted connection to your Postgres database, run a parameterised SQL query, and return the results as JSON. Parameterised queries (using `$1`, `$2` placeholders) are critical — they prevent SQL injection from user-supplied inputs. The database connection string (including username, password, host, port, and database name) must be stored as a Firebase environment config value, never hardcoded. Use the pooler or pgBouncer connection string for your host (Neon, Supabase, and RDS all provide one) rather than the direct connection string. Serverless functions spawn on demand and can exhaust Postgres connection limits quickly if they each open a fresh direct connection; the pooler manages a connection pool so your database doesn't get overwhelmed. You need a Firebase Blaze (pay-as-you-go) plan to deploy Cloud Functions. Blaze charges only for invocations beyond the free tier (2 million calls/month), so for most apps the cost is near zero. Deploy with `firebase deploy --only functions` from the Firebase CLI (run this outside FlutterFlow in your terminal).

1// Firebase Cloud Function — Postgres proxy (index.js)
2const functions = require('firebase-functions');
3const { Pool } = require('pg');
4
5// Initialise pool at module level (reused across warm invocations)
6const pool = new Pool({
7  connectionString: functions.config().pg.connection_string,
8  ssl: { rejectUnauthorized: false } // required for Neon/Supabase/RDS
9});
10
11exports.queryPostgres = functions.https.onRequest(async (req, res) => {
12  res.set('Access-Control-Allow-Origin', '*');
13  if (req.method === 'OPTIONS') {
14    res.set('Access-Control-Allow-Methods', 'POST');
15    res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
16    return res.status(204).send('');
17  }
18
19  // Accept a simple action identifier so one function can handle multiple queries
20  const { action, params = [] } = req.body;
21
22  const queries = {
23    listUsers: 'SELECT id, name, email FROM users ORDER BY created_at DESC LIMIT 50',
24    getUserById: 'SELECT id, name, email FROM users WHERE id = $1',
25  };
26
27  if (!queries[action]) {
28    return res.status(400).json({ error: 'Unknown action' });
29  }
30
31  try {
32    const { rows } = await pool.query(queries[action], params);
33    return res.status(200).json({ rows });
34  } catch (err) {
35    console.error(err);
36    return res.status(500).json({ error: 'Database error' });
37  }
38});

With your Cloud Function deployed and returning JSON, connect it to FlutterFlow. In the left navigation, click 'API Calls' → '+ Add' → 'Create API Group'. Name it 'PostgresProxy'. Set the Base URL to your Cloud Function's base URL (e.g. `https://us-central1-yourproject.cloudfunctions.net`). Add a new API Call inside the group. Name it 'ListUsers'. Set the Method to POST and the URL to `/queryPostgres`. Switch to the Body tab, set Body Type to JSON, and set the raw body to `{"action":"listUsers"}`. Click 'Response & Test' and send the request — you should see the JSON array of user rows returned by Postgres. Add JSON Paths to extract the fields you need. If your function returns `{ "rows": [{"id":1,"name":"Alice"}] }`, the path for names is `$.rows[:].name` and for IDs is `$.rows[:].id`. Create a Data Type 'PostgresUser' with `id` (Integer) and `name` (String) fields, map the JSON Paths to those fields, and add a Backend Query to a ListView widget pointing at the ListUsers call. Your Postgres data will appear in the UI.

1{
2  "method": "POST",
3  "url": "https://us-central1-yourproject.cloudfunctions.net/queryPostgres",
4  "headers": {
5    "Content-Type": "application/json"
6  },
7  "body": {
8    "action": "listUsers"
9  }
10}

Whether you used the Supabase or Cloud Function path, the final step is the same: map the structured JSON response to FlutterFlow Data Types and bind them to widgets. For the Supabase path, FlutterFlow creates these Data Types automatically from your imported schema — you just pick the table in the Backend Query dropdown and the fields appear. Drag a ListView onto the canvas, open Backend Query, choose Supabase Query, select your table, and FlutterFlow handles the rest. Bind widget text fields to the current list item's columns via the '=' binding icon. For the Cloud Function path, create a custom Data Type (left nav → Data Types → + Add) that mirrors your Postgres query result. Add fields for each column you return. In the Backend Query on the ListView, choose 'API Call', select your API Group and call name, and map JSON Paths to Data Type fields in the response mapping section. Then bind ListView item widgets to the Data Type fields as normal. For write operations (INSERT, UPDATE), create a separate API Call that POSTs the payload to your Cloud Function with the appropriate `action` and `params`. Trigger this from an Action Flow on a form submit button. Always validate and sanitise inputs inside the Cloud Function — never concatenate user inputs directly into SQL strings.