Entdecke, was Flutter und Dart sind, installiere die Werkzeuge, erstelle dein erstes Projekt und erlebe die Magie des Hot Reload.
Diese Lektion in Kodokon öffnenFlutter ist ein Framework: ein großer Werkzeugkasten voller fertigem Code, von Google entwickelt, um mobile Anwendungen zu bauen, also die Programme, die du auf einem Handy installierst. Seine große Stärke: Du schreibst deinen Code nur einmal und er funktioniert auf iPhone, Android, im Web und sogar auf dem Desktop. Dieser Code wird in Dart geschrieben, einer Programmiersprache: einer Menge von Wörtern und Regeln, mit denen du einer Maschine Anweisungen geben kannst. Um Flutter zu installieren, folge der offiziellen Anleitung auf docs.flutter.dev (Abschnitt Get started): Dort lädst du das SDK herunter (Software Development Kit, das Paket mit allen Werkzeugen) und installierst einen Code-Editor wie Visual Studio Code mit seiner Flutter-Erweiterung. Anschließend prüfst du alles im Terminal: einem Fenster, in das du Textbefehle eingibst, um deinen Computer zu steuern.
flutter doctorDer Befehl flutter doctor verhält sich wie ein Arzt: Er untersucht deine Maschine und zeigt eine Checkliste an, mit einem grünen Häkchen für das, was bereit ist, und einem Kreuz für das, was fehlt, samt Anweisungen zur Behebung. Sobald das Wesentliche grün ist, kannst du dein erstes Projekt erstellen: den Ordner, der den gesamten Code deiner App enthalten wird. Der Name eines Flutter-Projekts wird kleingeschrieben, ohne Leerzeichen und ohne Akzente, mit Unterstrichen (_) zwischen den Wörtern.
flutter create my_first_app
cd my_first_app
flutter runflutter create erzeugt einen Ordner my_first_app mit einer vollständigen Demo-App. cd (change directory) wechselt in diesen Ordner und flutter run kompiliert die App und startet sie dann auf einem per USB verbundenen Handy, auf einem Emulator (einem virtuellen Handy auf deinem Bildschirm) oder im Browser Chrome. Der gesamte Code, den du schreibst, liegt in der Datei lib/main.dart. Ersetze ihren Inhalt durch dieses minimale Programm:
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(
theme: ThemeData(useMaterial3: true),
home: const Scaffold(
body: Center(
child: Text("Hello Flutter!"),
),
),
);
}
}Lesen wir die groben Züge, ohne alles beherrschen zu wollen: import lädt den grafischen Werkzeugkasten von Flutter, void main() ist der Einstiegspunkt (die allererste Funktion, die läuft) und runApp startet die App, indem sie den Text "Hello Flutter!" in der Mitte des Bildschirms anzeigt. Jedes Teil wird in den kommenden Lektionen genauer erklärt. Jetzt zur Magie des Hot Reload: Ändere den Text der Nachricht, speichere die Datei... und die angezeigte App aktualisiert sich sofort, ohne Neustart. Dieser ultrakurze Zyklus ist eine der großen Stärken von Flutter.