FlutterFlow: der Versuch, No-Code und echten Code zu versöhnen
Die Idee „App mit der Maus bauen" ist etwa so alt wie Smartphones selbst. Doch bis vor kurzem stieß das Ergebnis solcher Baukästen immer an dieselbe Grenze: ein hübscher Prototyp, der niemals ein ernsthaftes Produkt werden konnte. Sobald die Geschäftslogik komplexer wurde, stellte das Team fest, dass die Plattform nur das konnte, was ihre Erfinder vorgesehen hatten — und danach kam die Sackgasse.
FlutterFlow startete 2020 als direkte Antwort auf dieses Problem. Ein Y-Combinator-Team (Gründer Abel Mengistu und Alex Greaves) beschloss, keine eigene Runtime zu erfinden, sondern einen visuellen Editor über Flutter zu legen — Googles Open-Source-Framework hinter echten Produktiv-Apps wie Alibaba, BMW und Google Pay. Apps werden nicht „in der FlutterFlow-Cloud gerendert": Darunter liegt immer ein normales Flutter-Projekt, und der visuelle Editor ist nur eine bequeme Schicht darüber.
Genau diese Architekturentscheidung macht FlutterFlow interessant. Es sperrt Sie nicht in sein eigenes Ökosystem ein, wie es klassische No-Code-Baukästen tun. Schauen wir, was daraus in der Praxis wurde, was es kostet und wo die Plattform noch stolpert.
Offizielle Website: flutterflow.io
Was FlutterFlow wirklich ist
FlutterFlow ist eine cloudbasierte Low-Code-Umgebung zum Erstellen von Mobile-Apps für iOS und Android sowie Web-Apps. Alles läuft im Browser: Sie ziehen Widgets auf einen Bildschirm, konfigurieren deren Eigenschaften im rechten Panel und sehen das Ergebnis sofort im Handy-Rahmen. Keine lokale Umgebung, keine Compiler, keine IDE zu installieren.
Zentrale Elemente der Plattform:
- Visueller UI-Editor — über 200 fertige Widgets, Grids, Listen, Formulare, Navigation, Übergangsanimationen.
- Firebase- und Supabase-Integration — Datenbank, Authentifizierung, Dateispeicher und Cloud Functions in wenigen Klicks.
- API Calls — jeden REST- oder GraphQL-Endpunkt ohne Code anbinden.
- Custom Code — eigenen Dart-Code einfügen und jedes Paket aus dem Flutter-Ökosystem nutzen.
- State Management — App-State (App State, Page State und komplexere Szenarien).
- GitHub-Integration — Code in ein eigenes Repository synchronisieren.
- Code-Export — ein vollständiges Flutter-Projekt auf die Festplatte exportieren.
Vor allem die letzten beiden Punkte — Code-Export und GitHub — unterscheiden FlutterFlow grundlegend von „Bubble"-artigen Klassikern, aus denen man nie Code herausbekommt.
Vor- und Nachteile
Vorteile:
- Echter Flutter-Code am Ende — kein Vendor-Lock-in.
- Ordentliche Entwicklungsgeschwindigkeit für einfache und mittlere Apps: ein MVP entsteht in Tagen statt Monaten.
- Leistungsstarke Firebase- und Supabase-Integration — „Backend out of the box".
- Dart ist möglich, wenn die visuellen Bausteine nicht reichen.
- Lebendige Community, Template-Marktplatz, umfangreiche Doku und Video-Tutorials.
- Projekt-Export und GitHub-Sync.
- Cross-Platform: eine Codebasis für iOS, Android und Web.
Nachteile:
- Die Plattform ist kostenpflichtig, und für echte Arbeit gibt es faktisch keinen kostenlosen Tarif.
- Komplexe, stark angepasste Interfaces sind langsam und „zäh" zu bauen — der visuelle Editor stört eher, als zu helfen.
- Der generierte Code ist oft „verrauscht": saubere Architektur im exportierten Projekt zu pflegen ist schwer.
- Die Firebase-Bindung ist zum Start praktisch, ein Wechsel des Backends kostet aber Arbeit.
- Team-Zusammenarbeit erfordert einen teuren Tarif.
- Schwere Screens werden im Editor träge.
Funktionalität: Schicht für Schicht
Oberfläche und Screen-Aufbau
Der Editor folgt der vertrauten Logik „Canvas + Inspector". Links der Widget-Baum, in der Mitte das Layout, rechts die Eigenschaften des ausgewählten Elements. Flutter-Widgets sind in verständliche Einheiten umbenannt: Container, Columns, Rows, Texte, Buttons, Bilder. Für typische Aufgaben (Feed, Produktkarte, Anmeldeformular, Konto-Seite) gibt es Vorlagen.
Die größte Stärke sind Komponenten. Wer einmal eine Produktkarte gebaut hat, kann sie in eine wiederverwendbare Komponente mit Parametern verwandeln und überall einsetzen. Das ist kein „Zeichenwerkzeug" mehr, sondern ein echtes System zum Bauen von Oberflächen.
Erwähnenswert ist der Figma-Import: Ein Design lässt sich teilweise nach FlutterFlow übertragen und spart Layout-Arbeit in designgetriebenen Teams. Es funktioniert nicht perfekt, beschleunigt aber bei typischen Designs den Start deutlich.
Logik, Daten, Integrationen
Logik wird aus fertigen Aktionen zusammengesetzt: „zu Screen navigieren", „API aufrufen", „Dokument in der Datenbank aktualisieren", „Nachricht anzeigen", „Wert in App State schreiben". Für komplexe Bedingungen gibt es einen visuellen Editor für Ausdrücke und Bedingungslogik. Reicht das nicht, übernimmt Custom Code: Sie schreiben eine Dart-Funktion, und sie steht als normaler Block zur Verfügung.
Die Firebase-Integration ist das, was an FlutterFlow am meisten geliebt wird. Authentifizierung (E-Mail, Google, Apple, anonym), Cloud Firestore, Realtime Database, Storage, Remote Config — für die meisten MVPs an einem Abend verbunden. Supabase funktioniert ähnlich, wenn Sie einen offenen PostgreSQL-Stack bevorzugen.
Export, GitHub und Code-Eigentum
Die Möglichkeit, das Projekt herunterzuladen und mit GitHub zu synchronisieren, ist das Hauptargument für alle, die Vendor-Lock-in fürchten. Sie erhalten ein normales Flutter-Projekt, das mit flutter build baut und in jeder IDE weiterbearbeitet werden kann. Es ist jedoch kein „sauberes" Flutter: Der Code wird automatisiert erzeugt, mit vielen Service-Abstraktionen, und ihn exportiert von Hand zu pflegen ist deutlich schwerer, als von Grund auf zu schreiben. Der Export ist Versicherung und Einstiegspunkt, nicht die kostenlose Verwandlung in eine ordentliche Codebasis.
Apps veröffentlichen
FlutterFlow erlaubt den Build für App Store und Google Play direkt aus dem Interface, doch ein echter Release erfordert meist einen passenden Tarif plus Entwicklerkonten bei Apple (99 $/Jahr) und Google (25 $ einmalig). Das sind separate Kosten, die Anfänger oft vergessen.
Preise: was die Arbeit kostet
FlutterFlow läuft im Abo. Zum Zeitpunkt der Veröffentlichung sehen die Haupttarife so aus (Preise ungefähr; exakte Werte auf der Website):
- Free — kostenloser Tarif zum Ausprobieren, aber mit deutlichen Build-Limits und ohne Veröffentlichung. Für ein echtes Projekt reicht er nicht.
- Standard — grob ab ca. 30 $ pro Monat (bei Jahreszahlung). Für einen einzelnen Entwickler, persönliche und kleine Projekte.
- Pro — grob ab ca. 70 $ pro Monat. Hebt die meisten Limits auf, öffnet API-Integrationen, Code-Export, mehr Builds.
- Team / Enterprise — Team- und Unternehmens-Tarife, pro Nutzer abgerechnet, mit erweiterten Rechten, SSO und Support.
Wichtige Nuance: Neben dem Abo fallen fast immer Backend-Kosten an. Firebase hat einen eigenen Free-Tier, doch die Rechnung wächst mit den Nutzern. Die echten Betriebskosten sind FlutterFlow + Firebase + Entwicklerkonten + mögliche bezahlte Pakete.
Zum Vergleich: Ein VPS für das eigene Backend ist billiger und planbarer, verlangt aber jemanden, der damit umgehen kann. Wenn das Budget zählt, vorher rechnen.
In der Praxis: für wen es passt
Szenario 1. Gründer ohne Technikteam. FlutterFlow ist einer der wenigen Wege, ein echtes mobiles MVP ohne Entwickler zu bauen. In einem Monat erreichen Sie realistisch eine Version, die sich Investoren und ersten Nutzern zeigen lässt. Die Grenze ist die Komplexitätsobergrenze: Je ungewöhnlicher die Logik, desto häufiger tauchen Sie in Dart ein.
Szenario 2. Kleines Team mit eigenem Entwickler. Hier liegt der Gewinn in der Geschwindigkeit. Der Designer liefert den Entwurf, der Entwickler baut Screens und verbindet Firebase und schreibt komplexe Logik in Dart. FlutterFlow deckt den „langweiligen" Teil ab — Layout und typische Integrationen.
Szenario 3. Interne Tools und Admin-Panels. Für Service-Apps (Kommissionierung, Lager, Checklisten, Reporting) passt die Plattform fast besser als alles andere: Geschwindigkeit zählt mehr als ideale Architektur.
Szenario 4. Komplexes Produkt mit hohen Performance-Anforderungen. Etwa Apps mit schwerer Animation, Videoverarbeitung, ungewöhnlichen Gesten oder sehr präziser Kontrolle über das Rendering. Hier stört der visuelle Editor: Sie kämpfen gegen ihn und landen doch bei manuellem Dart.
Behalten Sie außerdem die Illusion im Blick, „wir hängen nicht mehr von Entwicklern ab". Die Plattform senkt die Einstiegshürde, beseitigt aber keine Engineering-Aufgaben: Architektur, Sicherheit, Backend-Optimierung, Monetarisierung, Analytics. Low-Code verwandelt die Frage „wer schreibt das" in „wer pflegt das".
Fazit
FlutterFlow ist eines der erfolgreichsten Werkzeuge in der Low-Code-Kategorie für mobile Entwicklung. Sein zentraler Unterschied ist echtes Flutter am Ende statt einer geschlossenen Sandbox. Das macht es zu einem akzeptablen Deal für alle, die Vendor-Lock-in fürchten: Im schlimmsten Fall bleibt Code, den Sie selbst weiterentwickeln können.
Wann nutzen: MVPs und Prototypen; interne Apps; einfache und mittelkomplexe Produkte mit typischem Funktionsumfang (Auth, Feeds, Formulare, Kataloge, Bestellungen); Teams, die eine Hypothese schnell testen müssen.
Wann nicht nutzen: wenn das Projekt von vornherein eine ungewöhnliche Oberfläche und komplexe Logik verlangt; wenn perfekt saubere Code-Architektur kritisch ist; wenn kein Budget für Abo und Backend vorhanden ist und der kostenlose Tarif nicht reicht.
Ein einfaches Kriterium: Nehmen Sie die Aufgabe, die Sie bauen wollen. Lässt sie sich als „Screen → Daten → Aktion → Screen" beschreiben, beschleunigt FlutterFlow Sie mit hoher Wahrscheinlichkeit. Klingt die Aufgabe wie „wir brauchen unsere eigene Engine", nehmen Sie reines Flutter und ersparen Sie sich und dem Editor den Kampf.