FlutterFlow, the Google-owned no-code builder that compiles real Flutter apps rather than templated wrappers, has quietly become the default starting point for people who want a working iOS and Android app without hiring a developer. The pitch sounds inflated until you build something in it. So here’s a real walkthrough: a notes app with email/password login and full create-read-delete functionality, built entirely on FlutterFlow’s current free tier and a free “Spark” Firebase project. No paid plan required — though you’ll hit its edges by the end, and we’ll tell you exactly where.
Every menu label, toggle name, and action type below was checked against FlutterFlow’s current interface and documentation, since the no-code space is notorious for tutorials describing a UI that moved eighteen months ago. Budget about 45 minutes.
What you need before opening FlutterFlow
- A free FlutterFlow account (flutterflow.io) — the Free plan allows two projects, which is plenty for this.
- A Google account for Firebase, FlutterFlow’s default backend.
- Nothing else. No Flutter SDK, no Android Studio, no code editor.
Step 1: Create the project and connect Firebase
Start a new project from a blank template rather than a pre-built starter — you learn more and avoid inheriting pages you’ll just delete. When FlutterFlow prompts you to connect a backend, choose Firebase and let it create a new Firebase project for you; this provisions the free Spark plan automatically, which covers everything here (Firestore reads/writes on Spark are capped at generous daily free quotas, not a dollar limit).
Step 2: Turn on authentication
Go to Settings and Integrations > App Settings > Authentication. Switch on Enable Authentication and set Authentication Type to Firebase. In the same panel you’ll set two routing fields that most beginner tutorials skip over and then wonder why their app ignores login state entirely:
- Entry Page — shown to a signed-out user. Point this at your login page.
- Logged In Page — shown automatically after sign-in. Point this at your notes list page.
Without both set, FlutterFlow has no gating logic — the app just opens whatever page sits first in your page list, logged in or not. This is the single most common reason a beginner’s “finished” auth flow doesn’t actually protect anything.
In the Firebase console, linked automatically from your project, enable the Email/Password sign-in provider under Authentication > Sign-in method. You don’t need to build password validation logic — Firebase owns that entirely; FlutterFlow’s Sign In and Create Account actions just call it.
Step 3: Build the login and signup pages
Add two pages: LoginPage and SignupPage, each with an Email TextField, a Password TextField, and a button. On the signup button’s action flow, add the Create Account action, feeding it the two text field values. On the login button, add Sign In with the same two fields. Both actions resolve automatically to your Logged In Page on success — you don’t hand-wire that navigation, the Entry/Logged In Page settings from Step 2 do it.
Step 4: Create the notes collection
Switch to the Firestore tab inside FlutterFlow and click + Create Collection. Name it notes and give it two fields: text (string) and userId (string, the signed-in user’s UID, so each person only sees their own notes). This field is what your security rules check later — the standard pattern is request.resource.data.userId == request.auth.uid on create, and resource.data.userId == request.auth.uid on read/update/delete, since request.resource is the incoming write while plain resource is the document already in the database.
Step 5: Build the list screen with a live query
On your HomePage, drop in a ListView, select it, and open the Backend Query panel in the right-hand properties pane. Click + Add Query, choose Query Collection, point it at notes, and filter where userId equals the current user’s UID. Bind a Text widget inside the ListView’s child item to the text field from that query. The list is now live: anything written to Firestore for that user appears automatically.
Step 6: Add a note (Create Document)
Add a floating action button and a TextField for new note entry. On the button’s action flow, add the Create Document Firestore action, target the notes collection, and map text to your field’s value and userId to the current user. Clear the text field afterward with a Reset Form action so the input doesn’t carry over to the next note.
Step 7: Delete a note
Select the ListTile inside your ListView and turn on its Slidable property, a built-in swipe-to-reveal behavior, not custom gesture code. Attach a Delete Document action to the revealed button, setting its document reference to the current list item — FlutterFlow exposes this automatically as the loop item’s reference inside a ListView. Delete Document needs that exact reference, not a matching field value; it’s a pointer, not a search.
Step 8: Test it like a skeptic
Run the app in Test Mode, sign up with a throwaway email, add two or three notes, swipe-delete one, then sign out and relaunch. You should land back on LoginPage, not the notes list — that’s the Entry Page setting earning its keep. Sign back in and confirm your remaining notes reappear exactly as left. If instead the app opens straight to the notes list while signed out, go back and double check the Authentication panel from Step 2 — that’s the fix nine times out of ten.
Where the free plan actually stops you
Everything above works on FlutterFlow’s $0 Free tier. Where it stops: Free caps you at two projects, gives only five lifetime AI-generation requests, and limits publishing to the web with two free subdomains — no code export, no APK download, no one-click app store deployment. The cheapest upgrade, Basic, runs $39/month and unlocks unlimited projects plus code download; Growth ($80 first seat, $55 after) and Business ($150 first seat, $85 for seats two through five) add team and store-deployment tooling. For a first app you’re validating, free is enough to finish and test the whole thing — you only pay once you want it on an actual phone’s home screen via the app stores.
What makes this worth the 45 minutes isn’t the notes app itself — it’s that the same five actions (Sign In, Create Account, Create Document, Query Collection, Delete Document) are the backbone of almost every CRUD app anyone builds in FlutterFlow, from habit trackers to inventory tools. Learn the Entry Page/Logged In Page gotcha once and it stops costing you an evening of confused debugging on every project after this one.
