Stel je Supabase-backend in
Maak een Supabase-project aan. Voor een takenapp maak je de volgende tabel:
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);
Row Level Security (RLS) is cruciaal voor AVG-naleving — met RLS kan elke gebruiker alleen zijn eigen rijen zien en bewerken, direct op databaseniveau. Dat is een van de redenen waarom we altijd Supabase kiezen boven Firebase voor Nederlandse klanten met AVG-vereisten. Kopieer je Supabase-project-URL en anon-sleutel — je hebt ze nodig in FlutterFlow.
Verbind FlutterFlow met Supabase
In FlutterFlow, ga naar Settings → Supabase. Plak je Supabase-URL en anon-sleutel. FlutterFlow authenticeert en toont je databaseschema.
Je ziet je tasks-tabel weergegeven met alle kolommen. FlutterFlow genereert automatisch getypeerde query-builders voor elke tabel — geen SQL nodig in de frontend. Dit is een van de grote voordelen van de combinatie: je ontwerpt de interface visueel in FlutterFlow terwijl Supabase alle datalogica verwerkt.
Een tip: geef je Supabase-project een naam die het klantproject weerspiegelt, zoals "bedrijf-app-prod". Dat vergemakkelijkt onderhoud en maakt het duidelijker voor iedereen in het team.
Bouw authenticatie
Gebruik FlutterFlow's Supabase Auth-acties voor aanmelden en registreren. Maak: 1. Een inlogpagina met e-mail/wachtwoordvelden en een "Inloggen"-knop 2. Een registratiepagina met e-mail, wachtwoord en wachtwoord bevestigen 3. Koppel de knop-OnTap-acties aan "Log In with Email" en "Create Account with Email" (beide Supabase auth-acties)
Stel "Initial Page"-logica in: als gebruiker is geauthenticeerd → Startpagina, anders → Inlogpagina.
Voor apps gericht op Nederlandse zakelijke klanten kun je ook iDEAL-betalingen en DigiD-achtige verificatie toevoegen via een Xano API-aanroep — dat geeft direct geloofwaardigheid bij enterprise-klanten.
Bouw de takenlijst
Maak een ListView-component. Stel de databron in op je Supabase tasks-tabel. Voeg een filter toe: user_id = currentAuthUser.uid (FlutterFlow vult dit automatisch in).
Voor elk lijstitem: toon de taaktitel, een checkbox voor de completed-status en een verwijderknop. Koppel de checkbox aan een Supabase UPDATE-actie (update completed = true/false). Koppel de verwijderknop aan een Supabase DELETE-actie.
Een ontwerptip: voeg een lege staat (empty state) toe met uitnodigende tekst en knop — bijvoorbeeld "Je hebt nog geen taken. Maak je eerste aan!" — in plaats van een lege lijst. Dat verbetert de activeringsratio aanzienlijk en geeft een professionele indruk.
Voeg realtime-subscriptions toe
In FlutterFlow's Supabase-instellingen, activeer Realtime voor de tasks-tabel. In je takenlijstcomponent, activeer "Realtime" op de databron.
Wanneer een taak nu wordt toegevoegd, bijgewerkt of verwijderd (vanaf elk apparaat) wordt je lijst automatisch vernieuwd — geen handmatige polling nodig. Dit is een van Supabase's sterkste punten vergeleken met traditionele REST: je krijgt live-updates zonder extra infrastructuur.
Voor teamapps en samenwerkingsfuncties (zoals taken delen met collega's) kun je dit uitbreiden met Supabase Presence om te laten zien welke gebruikers online zijn in realtime.
Publiceer naar App Store en Google Play
In FlutterFlow, ga naar Run → Build → iOS en Android.
Voor iOS: je hebt een Apple Developer-account nodig (€109/jaar). FlutterFlow genereert het .ipa-bestand. Verstuur via Xcode of Transporter. App Store-review duurt 1–3 dagen voor de eerste indiening.
Voor Android: FlutterFlow genereert een ondertekend .aab-bestand. Verstuur via Google Play Console. Updates worden meestal binnen 24 uur beoordeeld.
Een belangrijke stap voor Nederlandse apps: zorg dat je App Store- en Google Play-beschrijving in het Nederlands is als je primaire doelgroep Nederlandse gebruikers zijn. Dat verbetert de organische zichtbaarheid in de appstores aanzienlijk.