1.3 Erste Flutter-App
Nach den vielen Installationen können wir endlich damit beginnen, Flutter produktiv zu verwenden.
Neues Flutter Projekt erstellen
- Starten Sie VS Code.
- Öffnen Sie in VS Code die Kommandopalette (Ctrl+Shift+P unter Windows oder Cmd+Shift+P unter macOS).
- Tippen Sie “flutter” und wählen Sie Flutter: New Project.
- Wählen Sie Application.
- Wählen Sie auf Ihrem Computer einen Speicherort für Ihr Projekt aus.
- Wählen Sie einen Projektnamen wie ersteapp und bestätigten Sie mit Enter.
- Warten Sie bis das Flutter Projekt erstellt wurde und im Ordner lib die Datei main.dart erscheint
Flutter Demo-App ausführen
Das automatisch erstellte Projekt ist eine einfache Demo-App. Die App zählt, wie oft Sie auf eine Schaltfläche tippen.
- Um die Demo-App auszuprobieren, klicken Sie unten rechts (1) und wählen Sie das virtuelle oder physische Gerät aus (2), welches Sie in Abschnitt 1.2 eingerichtet haben.
- Starten Sie die App, indem Sie auf die Schaltfläche “Start Debugging“ klicken (3).
- Es kann eine Weile dauern, bis die App das erste Mal kompiliert und gestartet wurde. Wenn der Prozess fertig ist, sollten Sie Folgendes sehen:
- Herzlichen Glückwunsch, Sie haben Ihre erste Flutter-App erstellt! Klicken Sie auf die Schaltfläche mit dem + Symbol und beobachten Sie, wie das Textlabel aktualisiert wird.
Hinweis
Hot-Reload
Hot-Reload ist ein Feature von Flutter, welches die im Code vorgenommenen Änderungen direkt auf Ihrem Gerät darstellt. In Visual Studio Code kann man durch Speichern (Ctrl+S unter Windows oder Cmd+S unter macOS) einen Hot-Reload durchführen.
Hot-Reload Feature testen
- Passen Sie das Fenster von VS Code so an, dass Sie das Fenster von VS Code und das Fenster mit der ausgeführten App gleichzeitig sehen können.
- Suchen Sie in der Datei main.dart nach der Zeile mit dem Text 'You have pushed the button this many times:' und ersetzen den String durch einen anderen Text (1).
- Speichern Sie die Änderungen mit Ctrl+S (Windows) oder Cmd+S (macOS). Sehen Sie sich nun die laufende App an und beobachten Sie die Änderung (2).
- Et voilà, Ihre Änderungen werden neu geladen, ohne die App zu stoppen und erneut auszuführen.
Im nächsten Kapitel werden Sie eine App von Grund auf neu erstellen, damit Sie sich mit den Tools und der grundlegenden Struktur von Flutter-Apps vertraut machen können.