Was FlutterFlow ist — und was es nicht ist
FlutterFlow ist ein visueller Builder, der Dart/Flutter-Code generiert. "Visuell" bedeutet: du ziehst Widgets in einen Canvas und konfigurierst Eigenschaften in einem Panel — kein Code schreiben für die meisten Funktionen.
"Generiert Dart/Flutter-Code" bedeutet: das Ergebnis ist eine echte native App, keine WebView. Sie läuft direkt auf dem iOS- oder Android-Betriebssystem, hat native Performance und besteht die App-Store-Prüfung wie eine professionell entwickelte App.
Was FlutterFlow nicht ist: ein Drag-and-Drop-Website-Builder wie Webflow, ein Automatisierungstool wie Make, oder ein Datenbank-Tool wie Supabase. FlutterFlow ist ausschließlich das UI-Layer — du brauchst ein Backend (typisch Supabase oder Firebase) für Datenspeicherung und Authentifizierung.
Für den deutschen Markt: FlutterFlow-Apps können in den deutschen, österreichischen und schweizer App Stores veröffentlicht werden. Mit Supabase EU-Region ist die gesamte App-Infrastruktur DSGVO-konform.
Erste Schritte: Projekt einrichten
1. Konto erstellen auf flutterflow.io (kostenlos zum Starten) 2. New Project → App Name, Package Name (z.B. de.deinunternehmen.deinapp), Startfarbe 3. Platform: iOS + Android (beide auswählen) 4. Design System: wähle einen Ausgangspunkt oder starte mit blank
Wichtige erste Konfigurationen: - **App Icon**: Lade dein Icon hoch (1024×1024 PNG ohne Transparenz). FlutterFlow generiert alle notwendigen Größen für iOS und Android automatisch. - **Splash Screen**: Das Screen, das beim App-Start angezeigt wird. Konfiguriere Farbe und Logo. - **App Theme**: Primärfarbe, Sekundärfarbe, Schriftart. Definiere diese früh — sie werden auf alle UI-Komponenten angewendet. - **Supabase-Verbindung**: Settings → Integrations → Supabase → Project URL und Anon Key einfügen. Dein Tabellenschema wird automatisch importiert.
Die wichtigsten FlutterFlow-Konzepte
**Widgets**: Alles in FlutterFlow ist ein Widget — Buttons, Texte, Bilder, Container. Widgets werden in einer Baumstruktur verschachtelt: ein Column-Widget enthält mehrere Row-Widgets, die jeweils Text- und Icon-Widgets enthalten.
**State (Zustand)**: FlutterFlow hat drei Zustandsebenen: - App State: global, persistiert über Sessions (Nutzerpräferenzen, Auth-Token) - Page State: nur auf der aktuellen Seite, wird beim Verlassen zurückgesetzt - Component State: nur in einer spezifischen Komponente
**Actions**: Die Logik hinter Buttons und anderen Events. Eine Action kann sein: Navigate to (neue Seite öffnen), Backend Call (Supabase abfragen), Update App State, Show Snackbar, etc. Actions werden in einer visuellen Sequenz konfiguriert.
**Custom Functions**: Wenn du Logik brauchst, die FlutterFlow nicht nativ unterstützt (komplexe Mathematik, String-Manipulation, etc.), kannst du eigene Dart-Funktionen schreiben. Du brauchst dafür Dart-Kenntnisse, aber die meisten Apps kommen ohne Custom Functions aus.
Authentifizierung einrichten
Authentifizierung in FlutterFlow + Supabase einzurichten dauert ca. 30 Minuten:
1. **Supabase Auth aktivieren**: In Supabase Dashboard → Authentication → Email Signups aktivieren. Optional: Google OAuth (braucht Google Cloud Console App), Apple Sign-In (braucht Apple Developer Account).
2. **FlutterFlow-Seiten erstellen**: - Login Page: E-Mail und Passwort Eingabefelder, Login-Button, "Passwort vergessen"-Link - Register Page: Name, E-Mail, Passwort, Passwort-Bestätigung, Register-Button - Email Verification Page (wenn Double-Opt-In aktiviert)
3. **Actions konfigurieren**: Auf dem Login-Button → Action → Authenticate → Supabase Email Sign In. Bei Erfolg: Navigate to → Home Page. Bei Fehler: Show Snackbar mit Fehlermeldung auf Deutsch.
4. **Auth Guard einrichten**: Für alle Seiten, die Anmeldung erfordern: Route Settings → Authentication Required aktivieren. FlutterFlow leitet nicht-angemeldete Nutzer automatisch zur Login-Seite weiter.
Für DSGVO: füge ein Opt-In-Checkbox für Marketing-Kommunikation auf der Registrierungsseite hinzu und speichere den Consent-Status in einer Supabase-Spalte mit Timestamp.
Erste App-Screens bauen
Das Grundmuster für jede Datenliste-Screen:
1. **Page erstellen**: + Add Page → Name vergeben → Template auswählen (blank oder list-Vorlage) 2. **Backend Query hinzufügen**: Backend Query → Supabase → deine Tabelle → Filter (z.B. `user_id = current_user_id`) → Order by → Limit 3. **ListView Widget hinzufügen**: Component Library → ListView → an Query binden 4. **List Item bauen**: Ein Container-Widget mit Text, Bild und anderen Informationen, die an die Felder jeder Zeile gebunden sind 5. **Tap-Action**: Beim Klick auf ein List Item: Navigate to → Detail Page → übergebe die row_id als Parameter
Für Formulare (neue Einträge erstellen): 1. Form-Widget aus der Library 2. Felder: TextField-Widgets, gebunden an lokale State-Variablen 3. Submit-Button-Action: Supabase Insert → mit den State-Variable-Werten als Felder → bei Erfolg: Navigate back
Baue immer den Happy Path zuerst (kein Fehlerhandling, keine Ladeanimationen), dann füge diese Details hinzu.
Testen und im App Store veröffentlichen
Testmethoden (in dieser Reihenfolge nutzen): 1. **Web Preview**: Schnell, aber simuliert kein natives Mobile-Verhalten vollständig 2. **FlutterFlow Mobile App**: Scanne den QR-Code in FlutterFlow, teste auf deinem physischen Gerät. Empfohlen ab Woche 2. 3. **Download APK**: Vollständige Android-Build, auf Android-Gerät installieren 4. **iOS Build via Xcode**: Erfordert Mac und Apple Developer Account
Für App Store-Veröffentlichung: - Apple: FlutterFlow → Publish → Build iOS → zu TestFlight deployen. Erfordert Apple Developer Account (99 USD/Jahr). - Google: FlutterFlow → Publish → Build Android → zu Google Play hochladen. Erfordert Google Play Developer Account (25 USD einmalig).
Vor der Einreichung sicherstellen: - Datenschutzrichtlinie URL im App Store Connect eingegeben - Konto-Lösch-Funktion implementiert (Apple-Pflicht) - Alle Berechtigungsanfragen (Kamera, Standort, Benachrichtigungen) mit Beschreibung auf Deutsch erklärt - App Store Screenshots auf Deutsch erstellt