So generierst du eine Flutter-App mit VULK

Aktualisiert am 17. Juli 2026 – aufgefrischt mit verifizierten Plattformdaten, dem aktuellen Flutter-Build-Preview-Ablauf und APK/AAB-Export-Details.

Wie generiert man eine Flutter-App mit VULK?

Die vollständige Antwort: Schreib einen Prompt, der eine Mobile-App in Mobile-Begriffen beschreibt – Screens, untere Navigation, Gesten – und VULK leitet ihn automatisch in die Flutter-Pipeline. Es generiert ein vollständiges Dart-Projekt mit Clean Architecture (Modelle, Screens, Widgets, Services, zentralisiertes Theme), verwaltet die pubspec.yaml-Abhängigkeiten für dich, baut die App serverseitig und liefert eine interaktive Vorschau in deinem Browser (ein echter flutter build web-Build, typischerweise 20–60 Sekunden). Wenn alles passt, exportierst du ein natives Android-APK oder -AAB direkt aus dem Editor (ab Builder-Plan), oder du lädst den vollständigen Quellcode herunter und führst ihn lokal mit flutter run aus.

Flutter ist die #2-Plattform auf VULK mit 5,6 % aller Projekte mit erkennbarem Stack – nur hinter React-Web-Apps mit 80,5 % – und die meistgefragte Plattform in Nutzer-Prompts überhaupt (381 Prompt-Nachfrage-Nennungen aller Zeiten, vor Node-Backends mit 310 und Next.js mit 265; VULK-Plattformdaten, Juli 2026). Die mobile Nachfrage läuft dem voraus, was die meisten KI-Builder liefern können – genau deshalb existiert diese Pipeline.

Warum ist Mobile die Lücke bei KI-Code-Buildern?

Das hat mich am Markt der KI-Code-Builder frustriert: Alle haben vergessen, dass Mobile existiert. Die meisten Tools – Bolt, v0, Lovable – generieren ausschließlich Web-Apps. Aber schau, wie Menschen 2026 tatsächlich Software nutzen. Die meisten Consumer-Interaktionen passieren auf dem Telefon. Wenn du ein Produkt baust, brauchst du irgendwann wahrscheinlich eine Mobile-App. Und bis VULK gab es kein KI-Tool, das dich vom Prompt zu einer installierbaren Android-Binärdatei bringen konnte.

Ich habe Flutter aus einem bestimmten Grund als unser primäres Mobile-Framework gewählt. Flutter kompiliert aus einem einzigen Dart-Codebase zu wirklich nativem Code auf iOS und Android. Es ist keine Web View in einer nativen Hülle. Es ist keine JavaScript-Bridge. Die UI rendert mit 60fps über Skia, und du hast Zugriff auf plattformspezifische APIs. Google pflegt es, das Ökosystem ist ausgereift und die Entwickler-Community ist riesig – über eine Million aktive Entwickler.

Die Frage, die ich mir immer wieder stellte: Warum kann ein KI-Builder eine komplette React-App aus einem Prompt generieren, aber niemand hatte dasselbe für Flutter gebaut? Die Antwort: Es ist deutlich schwerer. Flutter hat seine eigene Sprache (Dart), sein eigenes Widget-System, seine eigenen Architekturmuster, seine eigenen State-Management-Paradigmen. Man kann einem Sprachmodell nicht einfach sagen „schreib Flutter-Code" und Produktionsqualität erwarten. Man braucht tiefes, meinungsstarkes Prompt-Engineering.

Also habe ich genau das gebaut.

Woher weiß VULK, dass du eine Flutter-App willst?

Du wählst Flutter nicht aus einem Dropdown. VULK liest deinen Prompt und leitet die Plattform automatisch ab. Beschreibt dein Prompt eine mobile Anwendung, aktiviert sich der Flutter-Generierungsmodus.

Zu den Triggersignalen gehören: „Mobile App", „Android-App", „iOS-App", „Flutter", „native App", „APK", „Screens" (statt „Seiten") und Verweise auf mobile-native Muster wie untere Navigationsleisten, Wischgesten, Push-Benachrichtigungen oder Kamerazugriff.

Hier die Unterscheidung in der Praxis:

Das triggert React (Web): „Baue ein Projektmanagement-Dashboard mit einer Sidebar und Datentabellen."

Das triggert Flutter (Mobile): „Baue eine Mobile-App zum Tracken von Workouts. Füge eine untere Navigationsleiste mit den Screens Home, Verlauf und Profil hinzu."

Wenn du Flutter unabhängig von der Formulierung erzwingen willst, nimm „Flutter" oder „Mobile App" in den Prompt auf. Explizit gewinnt immer über Inferenz.

Wie sieht der generierte Flutter-Code aus?

Das nehmen die meisten Leute bei KI-generiertem Flutter-Code falsch an: Sie erwarten, dass er unordentlich, unstrukturiert oder voller Anti-Patterns ist. VULKs Flutter-Output folgt Clean Architecture, weil ich Monate damit verbracht habe, den Prompt so zu engineeren, dass er sie erzwingt.

Eine typische generierte Projektstruktur:

lib/
  main.dart                    -- App entry, theme, routes
  models/
    workout.dart               -- Data classes with fromJson/toJson
    exercise.dart
  screens/
    home_screen.dart            -- StatefulWidget per screen
    history_screen.dart
    profile_screen.dart
  widgets/
    exercise_card.dart          -- Reusable components
    workout_summary.dart
  services/
    workout_service.dart        -- Business logic / data layer
  utils/
    constants.dart              -- Colors, spacing, strings
    theme.dart                  -- ThemeData configuration
pubspec.yaml                    -- Dependencies

Die Architekturentscheidungen sind bewusst getroffen:

State Management skaliert mit der Komplexität. Einfache Apps bekommen setState. Apps mit über Screens geteiltem State bekommen Provider oder Riverpod. Wenn dein Prompt einen Warenkorb erwähnt, der über Screens hinweg bestehen bleibt, erwarte Provider in den Abhängigkeiten.

Navigation nutzt Flutters eingebauten Navigator mit benannten Routen. Untere Navigation nutzt ein Scaffold mit bottomNavigationBar und einem IndexedStack, um den Screen-Zustand beim Tab-Wechsel zu erhalten – so, wie erfahrene Flutter-Entwickler es bauen.

Styling ist zentralisiert. Material Design 3 mit einem eigenen ThemeData. Farben, Typografie und Komponenten-Themes werden in einer Theme-Datei definiert, nicht über Widgets verstreut. Dieses Muster macht Folgeänderungen handhabbar.

Datenmodelle enthalten fromJson- und toJson-Factory-Methoden, vom ersten Tag an bereit für API-Integration.

Wie schreibt man Prompts, die großartige Mobile-Apps produzieren?

Mobile-Apps haben fundamental andere UX-Muster als Web-Apps. Deine Prompts sollten das widerspiegeln – und genau hier verschwenden die meisten ihre ersten Versuche.

Denk in Screens, nicht in Seiten. Mobile-Apps haben Screens und Navigations-Stacks. Web-Terminologie wie „Seiten" und „Sidebar" schiebt den Output in Richtung eines Web-Layouts, das sich auf Mobile falsch anfühlt.

Gib das Navigationsmuster an. Untere Tabs, Drawer-Menü und obere Tab-Leiste sind in Flutter deutlich verschiedene Architekturen. Sei explizit: „Untere Navigation mit vier Tabs" gibt VULK einen klaren Navigationsrahmen.

Hier echte Prompts, die starken Output produzieren:

E-Commerce-App:

Baue eine Flutter-Mobile-App für einen Sneaker-Store. Untere Navigation mit den Tabs Home, Suche, Warenkorb und Profil. Home zeigt oben eine horizontal scrollbare Liste von Featured-Sneakern und darunter ein vertikales Raster aller Produkte. Jede Produktkarte zeigt Bild, Name, Preis und einen „In den Warenkorb"-Button. Der Warenkorb-Screen zeigt Artikel mit Mengensteuerung und Checkout-Summe. Nutze ein Schwarz-Weiß-Theme mit orangefarbener Akzentfarbe.

Dieser Prompt spezifiziert mobile-native Muster: untere Tabs, horizontale Scroll-Listen, Rasterlayouts, Mengen-Stepper. VULK generiert die passenden Widgets – ListView.builder mit scrollDirection: Axis.horizontal, GridView.builder, BottomNavigationBar.

Fitness-Tracker:

Erstelle eine Mobile-Fitness-App mit drei Screens: Dashboard, Workout erfassen und Fortschritt. Das Dashboard zeigt die wöchentliche Schrittzahl als kreisförmigen Fortschrittsindikator, verbrannte Kalorien und aktive Minuten. Workout erfassen hat ein Formular mit Dropdown für den Übungstyp, Dauer-Slider und Intensitätsbewertung. Fortschritt zeigt ein Liniendiagramm der Workouts pro Woche. Nutze Grün- und Dunkelgrautöne.

Beachte die mobilspezifischen UI-Elemente: kreisförmige Fortschrittsindikatoren, Slider, Sternebewertungen. Sie entsprechen direkt Flutter-Widgets.

Chat-App:

Baue eine Flutter-Messaging-App. Konversationsliste mit Avatar, Name, Vorschau der letzten Nachricht und Zeitstempel. Tippen auf eine Konversation öffnet einen Chat-Screen mit Nachrichtenblasen (gesendet rechts in Blau, empfangen links in Grau), Texteingabe unten mit Senden-Button. Füge einen Floating Action Button auf der Konversationsliste hinzu, um einen neuen Chat zu starten.

Das beschreibt Interaktionsflüsse (Tippen zum Öffnen, FAB zum Erstellen) und visuelle Positionierung (Blasen links vs. rechts) – die Art Detail, die wirklich nutzbaren Output produziert.

Wie funktioniert die Flutter-Vorschau?

Nach der Generierung baut VULK deine Flutter-App serverseitig und rendert sie in der Browser-Vorschau. Das ist eine echte flutter build web-Kompilierung deines tatsächlichen Dart-Codes – kein Mockup – in den Editor ausgeliefert. Ein Build dauert typischerweise 20–60 Sekunden und läuft nach jeder Änderung erneut. Du kannst Buttons antippen, zwischen Screens navigieren, Listen scrollen und Formulare ausfüllen.

Jede Iteration ist eine frische serverseitige Kompilierung. Visuelles Layout, Navigation und Styling in der Vorschau entsprechen der App, und plattformspezifische Features wie Kamerazugriff, GPS und Push-Benachrichtigungen laufen auf einem echten Gerät oder Emulator.

Folge-Prompts funktionieren genau wie bei React-Projekten:

Füge einen Splash Screen mit dem App-Logo zentriert auf dunklem Hintergrund hinzu. Zeige ihn 2 Sekunden, bevor zur Home navigiert wird.

Die Produktkarten brauchen ein Herz-Icon oben rechts für Favoriten. Antippen soll zwischen umrandetem und gefülltem Herz wechseln, mit einer Skalierungsanimation.

Jeder Folge-Prompt bearbeitet nur die betroffenen Dateien. Deine bestehenden Screens, Modelle und das Theme bleiben unangetastet. Plattformweit umfasst die mediane Build-Konversation 4 Nachrichten – ein solider Prompt plus ein paar Verfeinerungen (VULK-Plattformdaten, Juli 2026).

Wie werden Abhängigkeiten gehandhabt?

VULK verwaltet die pubspec.yaml für dich. Wenn dein Prompt Funktionalität referenziert, die ein Package erfordert – Diagramme, Bild-Caching, HTTP-Requests, State Management – fügt VULK die richtige Abhängigkeit hinzu, mit gepinnten Versionen, damit der serverseitige Build gelingt.

Häufig enthaltene Packages: provider oder flutter_riverpod für State Management, fl_chart für Diagramme, cached_network_image fürs Laden von Bildern, google_fonts für Typografie, intl für Datumsformatierung, shared_preferences für lokalen Speicher. Wenn du ein bestimmtes Package willst, nenne es im Prompt und VULK nutzt es statt seines Defaults.

Wie kommt man von der Vorschau zum APK oder AAB?

Sobald deine Flutter-App in der Vorschau passt, kannst du sie als natives Android-Binary exportieren. Der Export kompiliert deinen Dart-Code ahead-of-time zu ARM-Maschinencode – dieselbe App, aber nativ laufend statt über den Web-Build. Klick den APK-Export-Button in der Editor-Toolbar, warte auf den Build (typischerweise 30–90 Sekunden) und lade die .apk herunter. AAB-Export ist ebenfalls verfügbar für die Google-Play-Einreichung. Beides ist ab Builder (19,99 €/Monat) enthalten.

Du kannst auch den vollständigen Quellcode als ZIP herunterladen. Öffne ihn in Android Studio oder VS Code mit der Flutter-Extension, führe flutter pub get und dann flutter run aus. Der Code gehört dir – keine VULK-Abhängigkeiten, keine proprietären Packages, kein Lock-in. Die vollständige Export-Anleitung: So exportierst du ein APK aus VULK.

Warum Flutter statt React Native als Default?

Das werde ich regelmäßig gefragt. React Native ist ein großartiges Framework, und VULK kann auch React Native + Expo-Code generieren. Aber Flutter ist unser Mobile-Default aus zwei Gründen: Das Widget-System ist für KI-Generierung berechenbarer (jedes UI-Element ist ein komponierbares Widget mit klaren Eigenschaften), und der Output ist wirklich kompilierter nativer Code, keine JavaScript-Bridge. Für KI-generierte Apps, bei denen du konsistenten, pixelgenauen Output über Plattformen hinweg willst, passt Flutters Architektur besser.

Die Daten stimmen zu: Auf VULK übertreffen Flutter-Projekte React-Native-Projekte etwa 19 zu 1 (5,6 % vs. 0,3 % der Projekte mit erkennbarem Stack; VULK-Plattformdaten, Juli 2026). Flutter-Apps bekommen die Live-Build-Vorschau und den APK/AAB-Export; React-Native-Generierung produziert ein korrektes Expo-Projekt, das du mit Expo Go ausführst.