Erste Schritte in der mobilen App-Entwicklung mit Flutter

Flutter ist Googles quelloffenes UI-Framework: Aus einer einzigen Dart-Codebasis entstehen Apps für iOS, Android, Web und Desktop. Dieser Beitrag ist die Eingangstür der Serie. Er führt von der Installation bis zur ersten lauffähigen App – einschließlich der Stellen, an denen man am häufigsten hängen bleibt – und endet mit der Reihenfolge, in der Sie die nächsten Themen angehen sollten.

Live-Demo: Flutter-Einstiegsbeispiel

Noch bevor Sie etwas installieren, können Sie direkt im Browser sehen, wie Flutter aussieht. Probieren Sie Ihre erste Flutter-Anwendung interaktiv aus:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Einen Text oder eine Farbe im Code zu ändern und erneut auszuführen genügt, um Flutters Grundidee zu verstehen: Die Oberfläche ist Code aus ineinander verschachtelten Widgets.

Wie funktioniert Flutter?

Flutter verwendet nicht die Buttons und Listen der Plattform. Es zeichnet jedes Pixel auf dem Bildschirm mit seiner eigenen Rendering-Engine. In der Praxis heißt das: Derselbe Code sieht auf iOS und Android gleich aus, und das Design wird nicht von Plattformgrenzen ausgebremst. Geschrieben wird in Dart, einer typsicheren, null-sicheren Sprache, in die sich jeder mit Kenntnissen in Java, C# oder JavaScript in wenigen Tagen einfindet:

void main() {
  print('Hallo Flutter!');

  var name = 'Ahmet';
  int alter = 25;

  print('Ich heiße $name und bin $alter Jahre alt');
}

Die Eigenschaft, die man beim Entwickeln am stärksten spürt, ist Hot Reload: Beim Speichern erreicht die Änderung das Gerät innerhalb von Sekunden – ohne Neustart der App und ohne dass der Zustand auf dem Bildschirm verloren geht.

Installation: das große Bild

Versionsnummern und Download-Schritte ändern sich häufig, deshalb gibt es hier keine Schritt-für-Schritt-Screenshots; die aktuellen Schritte stehen immer auf der offiziellen Installationsseite. Wissen sollten Sie, dass die Einrichtung aus drei Teilen besteht:

1. Flutter SDK: das Framework selbst samt dem Kommandozeilenwerkzeug flutter. Das Dart SDK ist darin enthalten und wird nicht separat installiert. Nach dem Download muss der Ordner bin in die PATH-Variable des Systems aufgenommen werden.
2. Editor: VS Code oder Android Studio. Beide brauchen das Flutter-Plugin, das Codevervollständigung, Debugging und die Hot-Reload-Schaltflächen mitbringt. VS Code ist leichter; Android Studio bietet die Emulatorverwaltung im selben Fenster.
3. Werkzeuge der Zielplattform: für Android das Android SDK, das mit Android Studio kommt, plus ein Emulator. Für iOS Xcode – weshalb man zum Bauen für iOS einen Mac braucht. Wer unter Windows arbeitet, kann mit den Zielen Android und Web beginnen.

Am ersten Tag jede Plattform einrichten zu wollen ist unnötig. Ein einziges Ziel, etwa ein Android-Emulator oder Chrome, reicht zum Lernen völlig aus.

Die Einrichtung mit flutter doctor prüfen

Der erste Befehl nach der Installation:

flutter doctor

Er untersucht Ihre Umgebung und gibt pro Komponente eine Zeile aus. Zeilen mit einem Häkchen sind bereit; bei Zeilen mit Ausrufezeichen oder Kreuz fehlt etwas, und darunter steht, was zu tun ist. Der wichtige Punkt: Nicht jede Zeile muss grün sein. Wenn Sie nur für Android entwickeln, hält Sie eine Warnung in der Zeile zu Xcode oder Visual Studio nicht auf. Die Details einer Warnung zeigt flutter doctor -v.

Das erste Projekt erstellen und starten

flutter create erste_app
cd erste_app
flutter run

flutter create erzeugt eine lauffähige Beispiel-App. flutter run installiert sie auf einem angeschlossenen Gerät oder einem laufenden Emulator. Gibt es mehrere Ziele, fragt der Befehl nach; direkt wählen Sie mit -d:

flutter devices          # Listet verfügbare Geräte auf
flutter emulators        # Listet installierte Emulatoren auf
flutter run -d chrome    # Startet im Browser

Im Editor erledigen Sie dasselbe, indem Sie unten rechts im Geräteauswahlfeld das Ziel wählen und F5 drücken.

Projektstruktur

Der erzeugte Ordner enthält auf den ersten Blick viele Dateien, am Anfang arbeiten Sie aber nur mit zweien:

Pfad	Wozu dient er?
lib/main.dart	Einstiegspunkt der App. Der gesamte Dart-Code, den Sie schreiben, liegt unter lib/
pubspec.yaml	Projektname, Abhängigkeiten (Pakete), Asset-Deklarationen wie Bilder und Schriften
android/, ios/, web/	Plattformspezifische Hüllprojekte. Dort stellt man Berechtigungen, App-Namen und Icon ein
test/	Automatisierte Tests
analysis_options.yaml	Regeln für die Codeanalyse (Lints)
build/, .dart_tool/	Generierte Dateien; werden nie von Hand bearbeitet

Ein Paket fügen Sie mit flutter pub add paketname hinzu, statt pubspec.yaml von Hand zu bearbeiten. Für Bilder und Icons sind die Beiträge Bilder über Assets hinzufügen und App-Icon erstellen die nächsten Schritte.

Der Code Ihrer ersten App

Löschen Sie alles in lib/main.dart und schreiben Sie die kleinste sinnvolle App:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Meine erste App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Hallo Flutter')),
        body: const Center(
          child: Text(
            'Ich entwickle Apps mit Flutter!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Lesen wir von oben nach unten. main() ist der Startpunkt der App, und runApp übergibt das Wurzel-Widget an den Bildschirm. MaterialApp trägt app-weite Einstellungen wie Theme, Titel und Seitenübergänge. Scaffold ist das Gerüst einer einzelnen Seite: obere Leiste, Inhalt, gegebenenfalls ein unteres Menü. Center und Text sind der eigentliche Inhalt. In Flutter ist alles ein Widget; selbst die Ausrichtung (Center) ist ein Widget.

Widgets gibt es in zwei Arten. Ein StatelessWidget zeigt nur die Daten an, die es erhält. Ein StatefulWidget hält einen Wert, der sich mit der Zeit ändert, und zeichnet sich neu, wenn setState aufgerufen wird.

Hot Reload und Hot Restart

Ändern Sie bei laufender App den Text und speichern Sie die Datei; der Bildschirm aktualisiert sich sofort. Starten Sie aus dem Terminal, übernimmt das die Taste r.

• Hot Reload (r): schleust den geänderten Code in die laufende App ein und führt die build-Methoden erneut aus. Zustand wie ein Zählerwert, die geöffnete Seite oder der Text in Formularfeldern bleibt erhalten.
• Hot Restart (R): startet die App von vorn und setzt den Zustand zurück. Änderungen in main(), in initState oder an den Anfangswerten globaler und statischer Variablen werden nur so sichtbar.
• Vollständig stoppen und neu starten: nötig bei Änderungen, die die native Seite berühren – etwa nach dem Hinzufügen eines Pakets mit Plattformcode oder nach Änderungen an Dateien unter android/ und ios/.

Bei „Ich habe den Code geändert, aber auf dem Bildschirm tut sich nichts“ löst es das Problem meist, diese drei der Reihe nach zu probieren.

Mini-Szenario: ein Wasser-Tracker

Statt das mitgelieferte Zählerbeispiel auswendig zu lernen, schreiben wir einen kleinen, aber echten Bildschirm: eine Seite, die die am Tag getrunkenen Gläser Wasser zählt und zeigt, wie weit das Ziel entfernt ist. Sie müssen nur home in MaterialApp auf const WaterPage() setzen.

class WaterPage extends StatefulWidget {
  const WaterPage({super.key});

  @override
  State<WaterPage> createState() => _WaterPageState();
}

class _WaterPageState extends State<WaterPage> {
  static const int _goal = 8;
  int _glasses = 0;

  @override
  Widget build(BuildContext context) {
    final done = _glasses >= _goal;

    return Scaffold(
      appBar: AppBar(title: const Text('Wasser-Tracker')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '$_glasses / $_goal Gläser',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 16),
            SizedBox(
              width: 220,
              child: LinearProgressIndicator(
                value: (_glasses / _goal).clamp(0.0, 1.0),
              ),
            ),
            const SizedBox(height: 16),
            Text(done ? 'Tagesziel erreicht!' : 'Weiter so, fast geschafft.'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _glasses++),
        child: const Icon(Icons.local_drink),
      ),
    );
  }
}

Jeder Druck auf den Button erhöht die Variable innerhalb von setState, und Flutter führt die build-Methode erneut aus, um den Bildschirm zu aktualisieren. Fügen Sie ein paar Gläser hinzu, ändern Sie dann den Titeltext oder eine Farbe und speichern Sie: Der Bildschirm aktualisiert sich, ohne dass der Zähler zurückgesetzt wird. Genau das bedeutet „Hot Reload erhält den Zustand“. Details zu den Bausteinen dieses Bildschirms finden Sie in den Beiträgen zum FloatingActionButton und zu Eingabe-Widgets und Statusanzeigen.

Wann verwenden – und wann nicht?

Flutter ist in diesen Situationen eine starke Wahl: ein kleines Team oder ein Einzelentwickler, der gleichzeitig auf iOS und Android starten will; ein markenspezifisches Design, das auf beiden Plattformen identisch aussehen muss; Bedarf an schnellen Prototypen.

In den folgenden Situationen sollten Sie erst nachdenken:

• Besteht der Kern der App aus plattformspezifischen Fähigkeiten (Homescreen-Widgets, Uhren-Apps, die allerneuesten APIs des Betriebssystems), werden diese Teile weiterhin nativ geschrieben. Flutter unterstützt das, der Vorteil der „einen Codebasis“ schrumpft aber entsprechend.
• Zielen Sie nur auf eine Plattform und kennt das Team deren native Sprache bereits, bedeutet Swift oder Kotlin weniger Schichten.
• Für eine inhaltslastige Website, die auf Suchmaschinen-Traffic angewiesen ist, ist Flutter Web nicht das richtige Werkzeug; dort passen klassische Webtechnologien besser.

Wenn Sie die beiden populären Cross-Platform-Optionen vergleichen möchten, finden Sie eine ausführliche Einschätzung im Beitrag Flutter oder React Native.

Häufige Fehler

1. Der Befehl flutter wird nicht gefunden

Symptom: command not found: flutter im Terminal, unter Windows „'flutter' is not recognized as an internal or external command“. Das SDK wurde heruntergeladen, sein Ordner bin aber nie in PATH aufgenommen. Schließen Sie danach das Terminal und öffnen Sie es neu; ein offenes Fenster arbeitet mit dem alten PATH weiter.

2. Android-Lizenzen nicht akzeptiert

Symptom: eine Warnung zu Lizenzen in der Android-Zeile der Ausgabe von flutter doctor. Die Lösung: den folgenden Befehl ausführen und die Rückfragen mit y beantworten:

flutter doctor --android-licenses

Steht in derselben Zeile „cmdline-tools component is missing“, öffnen Sie in Android Studio den SDK Manager und installieren im Reiter „SDK Tools“ die „Android SDK Command-line Tools“.

3. Ungültiger Projektname

Symptom: flutter create Erste-App bricht mit "Erste-App" is not a valid Dart package name. ab. Der Projektname ist ein Dart-Paketname: nur Kleinbuchstaben, Ziffern und Unterstriche, und er darf nicht mit einer Ziffer beginnen. erste_app ist gültig. Der in den Stores angezeigte App-Name ist davon unabhängig und wird später in den Plattformordnern gesetzt.

4. Kein Gerät zum Ausführen

Symptom: flutter run endet mit einer Meldung in der Art von „No supported devices connected“. Der Emulator läuft nicht, oder die Verbindung zum Telefon wurde nicht erkannt. Den Emulator starten Sie über den Device Manager von Android Studio oder mit flutter emulators --launch <emulator_id>. Auf einem echten Android-Gerät muss in den Entwickleroptionen das USB-Debugging aktiviert sein. Steht nichts davon zur Verfügung, ist flutter run -d chrome immer zur Hand.

Wie geht es weiter?

Der häufigste Fehler beim Flutter-Lernen ist, Dart zu überspringen und sofort Widgets auswendig zu lernen. Diese Reihenfolge empfehle ich:

1. Dart-Grundlagen. Zuerst Typumwandlungen und das static-Konzept, dann die Collections List, Set und Map. Fast alles, was in Flutter auf dem Bildschirm landet, kommt aus einer Liste.
2. Objektorientiertes Dart. Jedes Widget ist eine Klasse, die mit extends geschrieben wird – Vererbung und Polymorphie machen Flutter-Code daher unmittelbar lesbarer.
3. Asynchrone Programmierung. Daten aus dem Internet zu laden oder eine Datei zu lesen funktioniert mit Future; der Beitrag zu try-catch und async/await behandelt diesen Teil.
4. Widget-Baum und Layout. Der Beitrag zu Widget-Baum, Row, Column und Stack ist der eigentliche Flutter-Einstieg und zeigt, wie man den Bildschirm aufteilt.
5. Eigene Widgets und Navigation zwischen Seiten. Sobald Sie wiederkehrende Bausteine in ein eigenes Widget auslagern und mit Navigator zwischen Seiten wechseln können, sind Sie in der Lage, eine echte mehrseitige App zu schreiben.

Alle Themen stehen der Reihe nach auf der Seite Flutter-Unterricht. Wenn Sie diese Reihenfolge im Einzelunterricht durchgehen möchten, sammelt der Beitrag worauf es bei der Wahl des besten Flutter-Lehrers ankommt die Kriterien dafür. Als offizielle Quellen verdienen die Flutter-Dokumentation und der Leitfaden zur Sprache Dart einen dauerhaft geöffneten Tab.

Häufig gestellte Fragen

Muss ich Dart können, bevor ich Flutter lerne?

Einen eigenen Dart-Kurs müssen Sie nicht abschließen, aber ohne Variablen, Funktionen, Klassen, Collections und async/await ist Widget-Code schwer zu lesen. Wer schon in einer anderen Sprache programmiert hat, kommt mit ein paar Tagen Dart-Grundlagen aus.

Kann ich auf einem Windows-Rechner iOS-Apps entwickeln?

Sie können den Code unter Windows schreiben und auf Android und im Web testen, der iOS-Build benötigt jedoch Xcode, und Xcode läuft nur unter macOS. Um die iOS-Version zu veröffentlichen, brauchen Sie einen Mac oder einen Cloud-Build-Dienst, der macOS bereitstellt.

Android Studio oder VS Code?

Beide werden offiziell unterstützt und bieten über das Flutter-Plugin dieselben Kernfunktionen. VS Code ist leichter und startet schneller; Android Studio bündelt Emulator- und Android-SDK-Verwaltung an einem Ort. Wer auf Android zielt, installiert häufig Android Studio für das SDK und schreibt den Code in VS Code.

Muss ich jede Warnung von flutter doctor beheben?

Nein. Nur die Zeilen zur Plattform, auf die Sie zielen, müssen sauber sein. Entwickeln Sie zum Beispiel nur für Android und Web, stehen Ihnen Warnungen zu Xcode oder Visual Studio nicht im Weg.