FlutterFlow + Supabase: Building a Full-Stack Mobile App (Tutorial)

FlutterFlow and Supabase is the most powerful no-code mobile stack available today. You get native iOS and Android apps with real PostgreSQL data, built-in authentication, and real-time subscriptions — all without writing backend code. Here is the complete tutorial.

Set Up Your Supabase Backend

Create a Supabase project. For a task app:
CREATE TABLE tasks (
  id bigserial PRIMARY KEY,
  title text NOT NULL,
  completed boolean DEFAULT false,
  user_id uuid REFERENCES auth.users(id),
  created_at timestamptz DEFAULT now()
);

ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
CREATE POLICY "user owns tasks" ON tasks
  FOR ALL USING (auth.uid() = user_id);

Copy your Supabase project URL and anon key — you'll need these in FlutterFlow.

Connect FlutterFlow to Supabase

In FlutterFlow, go to Settings → Supabase. Paste your Supabase URL and anon key. FlutterFlow will authenticate and display your database schema.

You'll see your tasks table listed with all columns. FlutterFlow auto-generates typed query builders for each table — no SQL needed in the frontend.

Build Authentication

Use FlutterFlow's Supabase Auth actions for login and signup. Create:
1. A login page with email/password fields and a "Sign In" button
2. A signup page with email, password, and confirm password
3. Connect the button OnTap actions to "Log In with Email" and "Create Account with Email" (both Supabase auth actions)

Set "Initial Page" logic: if user is authenticated → Home page, else → Login page.

Build the Task List Screen

Create a ListView component. Set the data source to your Supabase tasks table. Add a filter: user_id = currentAuthUser.uid (FlutterFlow auto-populates this).

For each list item: display the task title, a checkbox for completed status, and a delete button. Wire the checkbox to a Supabase UPDATE action (update completed = true/false). Wire the delete button to a Supabase DELETE action.

Add Real-Time Subscriptions

In FlutterFlow's Supabase settings, enable Realtime for the tasks table. In your task list component, enable "Realtime" on the data source.

Now when any task is added, updated, or deleted (from any device), your list automatically refreshes — no manual polling needed.

Submit to App Store and Google Play

In FlutterFlow, go to Run → Build → iOS and Android.

For iOS: you need an Apple Developer account ($99/year). FlutterFlow generates the .ipa file. Submit via Xcode or Transporter.

For Android: FlutterFlow generates a signed .aab file. Submit via the Google Play Console.

First submission takes 1–3 days for review. Updates are usually reviewed in 24 hours.