FlutterFlow supports three database connection paths: Firebase Firestore (native, recommended for most apps — set up via Settings → Project Setup → Firebase), Supabase (relational PostgreSQL — Settings → Integrations → Supabase), or any external database with a REST API via the API Manager. Choose Firestore for real-time and offline support, Supabase for complex queries and joins, and the API Manager for databases you already have running.
Three paths to connecting a database in FlutterFlow
Before your FlutterFlow app can read or write data, it needs to know where that data lives. FlutterFlow supports three main integration paths: Firebase Firestore for a fully managed NoSQL database with real-time sync and offline support, Supabase for a hosted PostgreSQL database with SQL queries and relational joins, and the API Manager for connecting to any existing database that exposes a REST API. This tutorial walks through each path so you can pick the right one and complete the initial connection setup.
Prerequisites
- A FlutterFlow project created and open in the editor
- A Google account (for Firebase) or a Supabase account if using those backends
- Basic understanding of what a database is (tables or collections of data records)
Step-by-step guide
Connect to Firebase Firestore (recommended for most new apps)
Connect to Firebase Firestore (recommended for most new apps)
In FlutterFlow, click Settings (gear icon, bottom-left) → Project Setup → Firebase. Click Create New Firebase Project to let FlutterFlow create and configure one automatically, or click Connect Existing Firebase Project and paste your Firebase project ID if you already have one. FlutterFlow will configure the Firebase SDK, add GoogleService-Info.plist (iOS) and google-services.json (Android) automatically, and enable Firestore. Once connected, the Firestore panel appears in the left sidebar. Click it → Add Collection to create your first collection (e.g., users, products, orders). Add fields with proper types (String, Integer, Boolean, Timestamp, DocumentReference). Test the connection by adding a Backend Query to any page: select Query Collection, pick your collection, and run in Test Mode to see results.
Expected result: The Firestore panel appears in the FlutterFlow sidebar with your collections visible, and a test Backend Query returns data from your collection.
Connect to Supabase (for relational data and SQL queries)
Connect to Supabase (for relational data and SQL queries)
Go to supabase.com, create a project, and note your Project URL and anon key (found in Project Settings → API). In FlutterFlow, click Settings → Integrations → Supabase. Toggle the Supabase integration ON. Paste your Supabase Project URL into the API URL field and your anon (public) key into the Anon Key field. Click Get Schema — FlutterFlow reads your Supabase tables and imports them as available query sources. If you have no tables yet, create them in the Supabase Dashboard → Table Editor before clicking Get Schema. After schema import, add a Backend Query to a page, select Supabase Query, pick a table, and add filters as needed. Click Test to verify the connection returns your data.
Expected result: FlutterFlow shows your Supabase tables in the Backend Query selector and a test query returns rows from your database.
Connect to an external database via the API Manager
Connect to an external database via the API Manager
If your database already has a REST API (for example, Airtable, Hasura, a custom backend, or a database with a REST wrapper), use FlutterFlow's API Manager. Click the API Manager icon in the left sidebar (looks like a plug). Click Add API Group. Set the Base URL to your API's root endpoint (e.g., https://api.example.com/v1). Under Headers, add your authentication header (e.g., Authorization: Bearer YOUR_TOKEN or X-API-Key: YOUR_KEY — store the key in Settings → Secrets and reference it as [secretName]). Add an API Call within the group: set the method (GET), path (/records), and add any query parameters. Click Test to verify the call returns data. In the Response tab, mark the fields you want to use in the UI. Finally, add a Backend Query to a page, select API Call, and pick your newly created call.
Expected result: The API Manager test returns JSON data from your external database and the fields are available for binding in FlutterFlow widgets.
Verify the connection with a test Backend Query
Verify the connection with a test Backend Query
After completing any of the three connection paths above, add a Backend Query to your home page to confirm end-to-end connectivity. Select any page in the canvas → Properties Panel → Backend Query tab → Add Query. For Firebase: select Query Collection, choose a collection, set a Limit of 5, and click Done. For Supabase: select Supabase Query, pick a table, add no filters, click Done. For external API: select API Call, pick your call, click Done. In the widget tree, add a Text widget inside the query scope. Set its value using Set from Variable → Backend Query → [field name]. Switch to Run Mode and verify the Text widget shows real data from your database. If it shows empty, check the connection credentials in the steps above.
Expected result: A Text widget on your home page displays a real value from your connected database when the app runs in Test Mode.
Complete working example
1DATABASE CONNECTION PATHS IN FLUTTERFLOW23PATH 1 — Firebase Firestore (Native)4├── Setup: Settings → Project Setup → Firebase5├── Best for: real-time sync, offline support, no SQL needed6├── Data model: NoSQL documents in collections7├── Auth: built-in Firebase Auth8└── Cost: free up to 50K reads/day (Spark), Blaze pay-as-you-go910PATH 2 — Supabase (PostgreSQL)11├── Setup: Settings → Integrations → Supabase12├── Requires: Project URL + anon key from supabase.com13├── Best for: relational data, SQL JOINs, complex filtering14├── Data model: tables with rows (relational)15├── Auth: Supabase Auth (separate from Firebase)16└── Cost: free 500MB, Pro $25/mo 8GB1718PATH 3 — External REST API19├── Setup: API Manager → Add API Group20├── Requires: REST endpoint + auth method (API key / Bearer token)21├── Best for: existing databases you cannot migrate22├── Data model: whatever the API returns (JSON)23├── No SQL queries in FlutterFlow — filter in the API itself24└── For non-REST DBs: deploy Cloud Function wrapper first2526CHOOSE ONE PRIMARY BACKEND:27- Do not connect Firebase AND Supabase without a clear data28 separation plan — queries break when backends overlap29- Firestore: documents (users/{uid}, products/{id})30- Supabase: tables (users, products, orders with foreign keys)3132TEST YOUR CONNECTION:331. Add Backend Query to any page342. Select your backend type353. Add a Text widget bound to a query field364. Run in Test Mode → confirm real data appearsCommon mistakes when connecting Your FlutterFlow Project to a Database
Why it's a problem: Connecting to both Firebase and Supabase without a clear data separation strategy
How to avoid: Choose ONE primary backend. If you genuinely need both (for example, Firebase Auth + Supabase data), clearly document which data lives where and never create references that cross backends.
Why it's a problem: Connecting directly to a SQL database from the FlutterFlow client without a REST wrapper
How to avoid: Deploy a Cloud Function that connects to the database server-side and exposes REST endpoints. FlutterFlow calls those Cloud Function URLs via the API Manager.
Why it's a problem: Not testing the connection after setup before building the UI
How to avoid: Always add a simple Backend Query to a test page immediately after connecting, bind a field to a Text widget, and run in Test Mode to confirm real data flows through before building your main UI.
Best practices
- Use Firestore for new apps that need real-time updates, offline support, and fast setup with minimal backend configuration
- Use Supabase when your data is naturally relational with foreign keys — product has many orders, order has many items — and you need SQL JOINs
- Store all database credentials (Supabase anon key, API tokens) in Settings → Secrets and reference them with [secretName] — never paste keys directly into header fields
- Test every Backend Query in Test Mode before proceeding to build the pages that depend on it
- Set Firestore Security Rules immediately after connecting — the default test rules expire after 30 days and lock out all access
- Keep one primary backend per project — mixing Firebase and Supabase in the same project significantly increases complexity and debugging difficulty
- For external databases, test API calls in the API Manager's Response and Test tab before adding them to Action Flows
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a FlutterFlow app and need to connect it to a database. My app needs [describe: real-time updates / relational data / existing database]. Should I use Firebase Firestore, Supabase, or a custom REST API? Explain the setup steps for the option you recommend and describe any configuration I need to do outside of FlutterFlow first.
Set up a Firebase Firestore connection in my FlutterFlow project. After connecting, create a collection called products with fields: name (String), price (Double), imageUrl (String), inStock (Boolean). Then add a Backend Query to the home page that fetches all products where inStock is true, ordered by name.
Frequently asked questions
How do I connect my FlutterFlow project to a database?
For Firebase Firestore: Settings → Project Setup → Firebase → create or connect a project. For Supabase: Settings → Integrations → Supabase → paste your API URL and anon key → Get Schema. For any external REST API: API Manager → Add API Group → set base URL and auth headers. Firebase is recommended for most beginners because it has the deepest native integration with FlutterFlow.
Do I need a paid plan to connect to a database in FlutterFlow?
No. Firebase Firestore and Supabase connections work on the FlutterFlow free plan. The external API Manager also works on free. Firebase Firestore has its own free Spark plan (50K reads/day, 20K writes/day) which is sufficient for most apps in development. Supabase free plan includes 500MB storage and 50K monthly active users.
Can I use both Firebase and Supabase in the same FlutterFlow project?
Technically yes, but it is not recommended without a clear data separation plan. Each backend handles different data types and queries work within one backend at a time. If you use both, decide upfront which collections live in Firestore and which tables live in Supabase, and never create cross-backend references. Most apps should pick one primary backend.
How do I connect FlutterFlow to a MySQL or PostgreSQL database I already have?
MySQL and PostgreSQL do not accept direct connections from mobile apps. You need to deploy a Cloud Function (Node.js) that connects to your database using the mysql2 or pg npm package and exposes REST endpoints. FlutterFlow then calls those Cloud Function URLs via the API Manager. Alternatively, put a REST API layer (like Hasura or PostgREST) in front of your PostgreSQL database and connect to that via the API Manager.
What is the difference between Firestore and a regular SQL database?
Firestore is a NoSQL document database — data is stored as JSON-like documents inside collections (similar to folders). There are no tables, rows, or SQL queries. Instead, you filter collections with where clauses. The advantages are: no schema required upfront, real-time listeners that push updates to the app automatically, and offline support built in. The disadvantages are: no JOINs (you must denormalize data or do multiple queries), limited querying (inequality on only one field, no OR operator). For apps with complex relational data, Supabase PostgreSQL is a better fit.
Can RapidDev help set up my FlutterFlow database architecture?
Yes. Choosing and configuring the right database — schema design, security rules, indexing, and connection setup — is one of the most impactful decisions in any app. RapidDev has set up Firebase and Supabase architectures across hundreds of FlutterFlow projects and can help you avoid common pitfalls like over-reading Firestore, missing indexes, or misconfigured RLS in Supabase.
Why does my Backend Query return empty results after connecting to Firestore?
The most common causes are: (1) Firestore Security Rules are blocking the read — check Firebase Console → Firestore → Rules and make sure your rules allow reads for the current auth state. (2) The collection path is wrong — collection names are case-sensitive. (3) No documents exist yet — add a test document in Firebase Console → Firestore → your collection → Add Document. (4) A filter in your Backend Query excludes all documents — remove all filters and test first.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation