Sätt upp din Supabase-backend
Skapa ett Supabase-projekt. För en uppgiftsapp skapar du tabellen:
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) är avgörande för GDPR-efterlevnad — med RLS kan varje användare bara se och redigera sina egna rader, direkt på databasnivå. Det är en av anledningarna till att vi alltid väljer Supabase framför Firebase för svenska kunder med GDPR-krav. Kopiera ditt Supabase-projekt-URL och anon-nyckel — du behöver dem i FlutterFlow.
Anslut FlutterFlow till Supabase
I FlutterFlow, gå till Settings → Supabase. Klistra in ditt Supabase-URL och anon-nyckel. FlutterFlow autentiserar och visar ditt databasschema.
Du ser din tasks-tabell listad med alla kolumner. FlutterFlow genererar automatiskt typade query-builders för varje tabell — ingen SQL behövs i frontend. Det här är en av de stora fördelarna med kombination: du designar gränssnittet visuellt i FlutterFlow medan Supabase hanterar all datalogik.
Ett tips: namnge ditt Supabase-projekt på ett sätt som speglar kundprojektet, exempelvis "company-app-prod". Det underlättar underhåll och gör det tydligare för alla i teamet.
Bygg autentisering
Använd FlutterFlows Supabase Auth-åtgärder för inloggning och registrering. Skapa: 1. En inloggningssida med e-post/lösenordsfält och en "Logga in"-knapp 2. En registreringssida med e-post, lösenord och bekräfta lösenord 3. Koppla knapp-OnTap-åtgärderna till "Log In with Email" och "Create Account with Email" (båda Supabase auth-åtgärder)
Sätt upp "Initial Page"-logiken: om användaren är autentiserad → Hemsida, annars → Inloggningssida.
För appar riktade mot svenska företagskunder kan du också lägga till BankID-autentisering via ett Xano-API-anrop som hanterar BankID-flödet — det ger omedelbar trovärdighet hos enterprise-kunder.
Bygg uppgiftslistan
Skapa en ListView-komponent. Sätt datakällan till din Supabase tasks-tabell. Lägg till ett filter: user_id = currentAuthUser.uid (FlutterFlow fyller i detta automatiskt).
För varje listobjekt: visa uppgiftstiteln, en kryssruta för completed-status och en raderingsknapp. Koppla kryssrutan till en Supabase UPDATE-åtgärd (uppdatera completed = true/false). Koppla raderingsknappen till en Supabase DELETE-åtgärd.
Ett designtips: lägg till ett tomt tillstånd (empty state) med en uppmanande text och knapp — exempelvis "Du har inga uppgifter ännu. Skapa din första!" — istället för en tom lista. Det förbättrar aktiveringsgraden markant och ger ett professionellt intryck.
Lägg till realtidsprenumerationer
I FlutterFlows Supabase-inställningar, aktivera Realtime för tasks-tabellen. I din uppgiftslistekomponent, aktivera "Realtime" på datakällan.
När en uppgift nu läggs till, uppdateras eller raderas (från valfri enhet) uppdateras din lista automatiskt — ingen manuell polling behövs. Det här är en av Supabase starka sidor jämfört med traditionell REST: du får live-uppdateringar utan extra infrastruktur.
För team-appar och samarbetsfunktioner (till exempel att dela uppgifter med kollegor) kan du utöka detta med Supabase Presence för att visa vilka användare som är online i realtid.
Publicera till App Store och Google Play
I FlutterFlow, gå till Run → Build → iOS och Android.
För iOS: du behöver ett Apple Developer-konto (1 199 SEK/år). FlutterFlow genererar .ipa-filen. Skicka via Xcode eller Transporter. App Store-granskning tar 1–3 dagar för första inlämningen.
För Android: FlutterFlow genererar en signerad .aab-fil. Skicka via Google Play Console. Uppdateringar granskas vanligtvis inom 24 timmar.
Ett viktigt steg för svenska appar: se till att din App Store- och Google Play-beskrivning är på svenska om din primära målgrupp är svenska användare. Det förbättrar organisk synlighet i appbutikerna markant.