Erste Flutter-App

In diesem Abschnitt erfahren Sie, wie Sie mit der Flutter CLI ein neues Flutter-Projekt erstellen, die App ausführen und die grundlegendste Codestruktur verstehen.

Verwenden Sie die Flutter CLI, um ein Projekt zu erstellen.

Die Flutter CLI ist das Befehlszeilentool von Flutter zum Erstellen, Verwalten und Bauen von Flutter-Projekten.

Neues Projekt erstellen

Führen Sie den folgenden Befehl im Terminal aus, um ein neues Flutter-Projekt zu erstellen:

$ flutter create my_first_app

wobeimy_first_appIst Ihr Projektname. Flutter erstellt die entsprechenden Ordner und Dateien basierend auf diesem Namen.

Der Projektname muss Kleinbuchstaben und Unterstriche verwenden und darf keine Leerzeichen oder Sonderzeichen enthalten.

Befehlsparameter

flutter createDer Befehl unterstützt mehrere Parameter:

$ flutter create hello_world
Creating project "hello_world"...
  .gitignore                    2026-04-01 10:30:22
  .metadata                     2026-04-01 10:30:22
  analysis_options.yaml         2026-04-01 10:01:15
  pubspec.yaml                  2026-04-01 10:30:22
  README.md                     2026-04-01 10:30:22
  lib/
    main.dart                    2026-04-01 10:30:22
  test/
    widget_test.dart             2026-04-01 10:22:34
  android/
  ios/
  web/
  ...
Running "flutter pub get"...                     13.2s
Running "flutter analyze"...                     3.2s

Flutter-Anwendung ausführen

Entwicklungsserver starten

Nachdem das Projekt erstellt wurde, wechseln Sie in das Projektverzeichnis und starten Sie die App:

$ cd hello_world
$ flutter run

Der erste Start kann einige Zeit dauern, da Flutter den Dart-Code kompilieren und die App starten muss.

Ausführungsgerät angeben

Wenn Ihr Computer mit mehreren Geräten (oder Emulatoren) verbunden ist, können Sie-dDer Parameter gibt das Ausführungsgerät an:

Verfügbare Geräte anzeigen

Führen Sie den folgenden Befehl aus, um alle verfügbaren laufenden Geräte anzuzeigen:

$ flutter devices

Beispielausgabe:

2 connected devices:
Chrome (web)      • chrome           • web-javascript • Chrome  • web
Windows (windows) • windows          • windows        • x64    • Windows 10.0.0

Hot-Reload-Funktion

Eine der leistungsstärksten Funktionen von Flutter ist Hot Reload. Während Sie die App ausführen:

1. Code ändern und speichern
2. Drücken Sie im TerminalrTaste
3. Die App wird neu geladen, und Sie können die neuesten Änderungen sehen

Hot Reload ist sehr schnell und dauert normalerweise nur ein oder zwei Sekunden. Dies verbessert die Entwicklungseffizienz erheblich, sodass Sie die Oberfläche in Echtzeit als Vorschau sehen können.

Hot Reload verliert nicht den Anwendungszustand, was bedeutet, dass Sie UI-Designs schnell iterieren können, ohne die Anwendung neu zu starten.

Analyse der Datei main.dart.

Jedes Flutter-Projekt hat eine Einstiegsdateilib/main.dartSchauen wir uns den standardmäßig generierten Inhalt an:

Beispiel: main.dart-Code

// lib/main.dart
// Einstiegsdatei der Flutter-Anwendung

// Material Design-Komponentenbibliothek importieren
import 'package:flutter/material.dart';

// Einstiegsfunktion der Anwendung
void main() {
  // runApp ist Flutters Startfunktion
  // Es empfängt ein Widget als Root-Widget
  runApp(const MyApp());
}

// Root-Widget (zustandsloses Widget)
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp ist das Root-Widget des Material-Design-Stils
    return MaterialApp(
      // Anwendungstitel festlegen
      title: 'Flutter Demo',
      // Themenfarbe festlegen
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // Material 3 verwenden
        useMaterial3: true,
      ),
      // Hauptseite der Anwendung
      home: const MyHomePage(title: 'Flutter Home'),
    );
  }
}

// Stateful-Widget (kann internen Zustand haben)
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // Seitentitel (unveränderlich)
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Zählerzustand
  int _counter = 0;

  // Methode zum Inkrementieren des Zählers
  void _incrementCounter() {
    // setState benachrichtigt Flutter, dass sich der Zustand geändert hat und die Benutzeroberfläche neu erstellt werden muss
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // Scaffold ist das Seitengerüst von Material Design
    return Scaffold(
      // AppBar ist die obere App-Leiste
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // Seitentitel anzeigen
        title: Text(widget.title),
      ),
      // Inhalt des Seitenkörpers
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Wie oft haben Sie auf die Schaltfläche geklickt:'),
            // Zähler anzeigen
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      // Schwebende Aktionsschaltfläche
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Erhöhen',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Erklärung der Codestruktur