Vad är FlutterFlow egentligen?

FlutterFlow är ett visuellt appbyggarverktyg som genererar Flutter-kod (Googles ramverk för multiplattformsappar). Konkret:

- Du bygger visuellt i en drag-and-drop-editor - FlutterFlow genererar Dart/Flutter-kod i bakgrunden - Du publicerar direkt på App Store (iOS) och Google Play (Android) - Du kan också exportera Flutter-källkoden vid behov

Skillnaden jämfört med Bubble eller WeWeb: FlutterFlow producerar kompilerade native-applikationer. Inte en WebView, inte en responsiv webbsida — en riktig app med flytande animationer, native-prestanda och tillgång till telefonfunktioner (kamera, GPS, biometri, NFC).

För svenska grundare som bygger en mobilapp kombinerar FlutterFlow no-codes hastighet med trovärdigheten hos en native-applikation i butikerna — vilket ofta är ett viktigt kommersiellt argument gentemot B2B-kunder eller investerare. Spotify och King byggde sina tidiga mobilprodukter snabbt och iterativt — FlutterFlow representerar 2026 års version av det iterativa förhållningssättet, men tillgängligt för team utan ett helt mobilutvecklingsteam.

Kom igång: skapa ditt projekt

1. Skapa ett konto Flutterflow.io → Sign up. Den gratisversionen låter dig bygga och testa, men kräver prenumeration för publicering i butikerna.

2. Nytt projekt Välj mellan att börja från noll, använda en mall eller importera en Figma-fil. För ett första projekt sparar en lämplig mall dig flera timmar.

3. FlutterFlow-gränssnittet - Canvas (mitten): visuell förhandsvisning av din app - Widget Tree (vänster): komponenthierarki - Properties Panel (höger): egenskaper för den valda komponenten - Action Flow Editor: logik och interaktioner - Data Schema: definition av dina datatyper

4. Ansluta Supabase Settings (kugghjul) → Integrations → Supabase → Ange URL och Anon Key. FlutterFlow importerar automatiskt alla dina tabeller. Du kan nu binda UI-element direkt till Supabase-kolumner — det är denna automatiska bindning som sparar tiotals timmar per projekt.

Bygga dina första vyer

Autentiseringsvy FlutterFlow har native Auth-komponenter. Dra en "Login Form"- eller "Sign Up Form"-komponent till din vy. Aktivera Supabase Auth i inställningarna → alla registrerings-/inloggningsflöden är automatiska.

Datalista Dra en "ListView"-komponent. I egenskaperna väljer du din Supabase Collection som källa. FlutterFlow genererar automatiskt förfrågningar och listrendering. Använd inbyggda filter och sortering för att förfina vad som visas.

Detaljvy Skapa en ny sida. Lägg till en "Page Parameter" av typen för din entitet. Sidans element binds till parameterns fält.

Navigation Välj en knapp → Add Action → Navigate → välj destinationssida. Skicka parametrar vid behov. FlutterFlow hanterar navigation och historik automatiskt — du får iOS och Androids native navigeringsbeteende utan att skriva en enda rad kod.

Logik med Action Flows

Action Flows är FlutterFlows logiksystem — den visuella motsvarigheten till JavaScript-kod.

Exempel: skapa ett projekt 1. Knapp "Skapa" → Add Action 2. Backend Call → Supabase → Insert Row i tabellen projects 3. Fält mappade från sidans TextFields 4. On Success → Navigate to project detail page 5. On Error → Show Snackbar "Ett fel uppstod"

Tillståndsvariabler FlutterFlow har tre nivåer av variabler: - Page State: variabel lokal till en sida (formulärtillstånd, laddningstillstånd) - App State: global variabel delad mellan alla sidor (t.ex. inloggad användare, preferenser) - Authenticated User: data för den inloggade användaren, tillgänglig överallt

För komplex data, använd Custom Types (structs) som du definierar i Data Schema. Det är rätt sätt att modellera affärsentiteter i FlutterFlow, snarare än att stapla skalärvariabler. Välstrukturerade datatyper gör din FlutterFlow-instans mycket lättare att underhålla och överlämna.

Testa och felsöka

Förhandsgranskningsläge (webbläsare) Snabbt för att testa layouter, men återger inte iOS/Android-beteende troget. Använd inte preview som enda testverktyg — du missar problem med native-beteende.

Testläge (på fysisk enhet) I FlutterFlow → Run → Test Mode. En QR-kod visas. Skanna den med din iPhone/Android — appen installeras direkt. Det är likvärdigt med ett development-build, med hot reload.

Testa på: - Ny iPhone (iPhone 14 eller 15) - Liten iPhone (iPhone SE för att kontrollera små skärmar) - Ny Android (Samsung Galaxy, Pixel) - Budget-Android om din målgrupp använder prisvärda enheter — viktigt för appar som riktar sig mot den bredare svenska marknaden

Loggar och fel FlutterFlow visar fel i webbläsarens konsol (F12 → Console). Supabase-fel syns i Supabase Dashboard → Logs → API Logs. För fel relaterade till RLS-policyer, leta efter 401- eller 403-fel i API-loggarna.

Publicera på App Store och Google Play

Förutsättningar - Apple: Apple Developer-konto (99 USD/år), Mac med Xcode (eller FlutterFlow cloud build) - Google: Google Play Developer-konto (25 USD engångskostnad)

Med FlutterFlow Cloud Build (rekommenderas) FlutterFlow → Run → Deploy → iOS App Store eller Android Play Store. FlutterFlow kompilerar koden i molnet — du behöver ingen Mac för iOS. Det förenklar avsevärt processen för team utan DevOps-profil.

Checklista inför inlämning - Sekretesspolicy länkad i appen och butikslistningen - Kontoborttagning tillgängligt från appen (obligatoriskt Apple sedan 2023) - Sign in with Apple aktiverat om du erbjuder Google Login (Apple-krav) - Skärmdumpar för alla obligatoriska skärmstorlekar - Beskrivning och nyckelord optimerade på svenska för den svenska marknaden - Inga placeholder-bilder eller testinnehåll synligt - GDPR-samtyckesdialog om du samlar in personuppgifter (krav i EU)

Apples granskning tar vanligtvis 1-3 dagar. Google Play är snabbare (några timmar till 1 dag). Lämna in med 2 veckors marginal innan ditt planerade lanseringsdatum.