Du möchtest schnell Flutter installiert bekommen und mit der App Entwicklung starten? Ich zeige dir, wie man Flutter und seine Entwicklungsumgebung auf Windows, MacOS oder Linux ohne viel Aufwand sehr schnell und vor allem sehr einfach installieren kann. Diese Anleitung besteht aus mehreren Teilen:
1. Flutter über das Community Package installieren
Wer sich schon einmal durch das Getting Started auf flutter.dev gekämpft hat, weiß, dass das Installieren von Flutter und seinen Abhängigkeiten alles andere als einfach ist. Zum Glück war die Flutter Community fleißig und hat sich für die komplexe Installation etwas ausgedacht. Drei Packages - für jedes Betriebssystem eines - die das Installieren von Flutter zu einem Kinderspiel machen.
Windows
MacOS
Linux
Installation von Flutter für Windows
Für Windows brauchen wir den Packagemanager von Chocolately. Für die Installation von Chocolately einfach durch die Installationsanleitung hangeln. Wenn das erledigt ist, gibst du in der Konsole folgenden Befehl ein:
choco install flutter
Nach wenigen Minuten ist Flutter vollständig installiert. Es kann jedoch sein, dass nicht die aktuellste Version installiert wurde. Um dies zu beheben, gib einfach folgenden Befehl ein:
flutter upgrade
Installation von Flutter für Mac
Der erste Schritt ist hier den Packagemanager Homebrew zu installieren. Gib hierfür einfach folgenden Befehl in deine Konsole ein:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Wenn das erledigt ist, kannst du ganz einfach mit folgendem Befehl Flutter installieren:
brew install --cask flutter
Und schon ist Flutter installiert und kann verwendet werden. Falls du direkt prüfen möchtest, ob die Version aktuell ist, einfach noch folgenden Befehl absetzen:
flutter upgrade
Installation von Flutter für Linux
Für Linux brauchen wir den Packagemanager von Snapcraft. Dieser kann hier heruntergeladen werden: Snapcraft herunterladen. Sobald dies erledigt ist, gib einfach in der Konsole Folgendes ein:
sudo snap install flutter --classic
Und ta-da! Flutter ist installiert. Auch hier kannst du den Befehl flutter doctor eingeben, um zu überprüfen, ob alles geklappt hat und um zu checken, was dir für die Entwicklung noch fehlt.
Installation der IDE (VS Code, Android Studio und evtl. Xcode)
Wenn Flutter installiert ist, brauchen wir noch eine Entwicklungsumgebung, mit der wir bei der Entwicklung mit Dart und Flutter Widgets bestmöglich unterstützt werden. Wenn du es dir sehr einfach machen willst, kannst du nur Chrome installieren und mit der Web Version von Flutter starten. Da siehst du deine App zwar nur im Web, aber es geht am schnellsten. Wenn du die Entwicklung auf einer richtigen App-Simulation sehen willst, brauchst du Folgendes:
Visual Studio Code
Android Studio
Xcode und Cocoapods
Visual Studio Code
Mit Visual Studio Code bekommst du einen sehr leistungsstarken und absolut leichtgewichtigen Code Editor der von Flutter selbst unterstützt wird. Visual Studio Code ist auch für alle Plattformen verfügbar. Dafür musst du die IDE einfach nur über die Webseite herunterladen und installieren.
Um mit VS Code einfach und schnell entwickeln zu können, solltest du dir direkt noch die Flutter Extension und Dart Extension hinzufügen. Dazu einfach links im VS Code Menü auf “Extensions” oder “Erweiterungen” klicken und nach “Flutter” und “Dart” suchen. Alternativ einfach ein Flutter Projekt im VS Code öffnen und dann schlägt dir der Editor selbst diese Packages für die Installation vor.
Android Studio herunterladen
Du benötigst das Android Studio in jedem Fall, um dir bequem über den AVD Manager die verschiedenen Android SDKs für den Android Emulator zu installieren. Das Android Studio funktioniert auf einem Mac, auf Windows und auch unter Linux und hier kannst du es downloaden: Android Studio. Nach der Installation musst du in Android Studio über ‘More Actions’ in den ‘SDK Manager’. Dieser fügt die eigentlichen Geräte hinzu, die du für die Entwicklung brauchst. Hier eine kleine visuelle Ansicht für die notwendigen Schritte:
Unter dem Reiter ‘SDK Platforms’ kannst du verschiedene Android Versionen installieren.
Unter dem Reiter ‘SDK Tools’ musst du zusätzlich ‘Android SDK Command-line Tools’ installieren.
Die Installation von Android Studio ist hiermit abgeschlossen.
Xcode und Cocoapods
Für die Entwicklung von iOS Apps benötigst du ebenfalls noch Xcode, welches du einfach aus dem App Store herunterladen kannst. Dieser Vorgang wird einige Zeit in Anspruch nehmen, meistens mehrere Stunden. Wenn du die Installation abgeschlossen hast, musst du noch CocoaPods installieren. CocoaPods ist ein Dependency Manager für iOS, der die Entwicklung erleichtert. Um diesen herunterzuladen, gib hierfür einfach folgenden Befehl in die Konsole ein (auch hier solltest du vorher Homebrew installiert haben):
brew install cocoapods
Nach der installation nur noch diese beiden Befehle eingeben und Xcode ist damit startklar:
sudo xcode-select --switch /Applications/Xcode.app/Contents/sudo xcodebuild -runFirstLaunch
Installation von Flutter und der Entwicklungsumgebung prüfen
Der schnellste Weg zu prüfen, ob Flutter korrekt installiert und alle Pfad-Variablen korrekt gesetzt wurden, ist der Befehl:
flutter --version
Wenn dieser Befehl aufgerufen werden kann, ist der erste Erfolg zu sehen:
Falls du eine ältere Version von Flutter installiert hast, wirst du Folgendes in der Console sehen:
Wenn er den Befehl flutter nicht erkennt, ist wohl etwas schief gelaufen. Zumindest wird die Flutter Runtime nicht gefunden. Falls die Meldung “A new version of Flutter is available!” zu sehen ist, dann direkt den Befehl für das Update hinterherschieben:
flutter upgrade
Flutter Doctor
Um zu überprüfen, ob die Installation wirklich vollständig funktioniert hat, bringt Flutter seinen eigenen Doctor mit. Dazu folgenden Befehl ausführen:
flutter doctor
Wenn Flutter und die IDE erfolgreich installiert wurde, sollte überall ein grünes Häkchen sein. Wenn dies nicht der Fall ist, schaue ob du die richtige Version hast oder wiederhole bei Bedarf die Installation.
Und schon bist du startklar.
Erstes Flutter Hello World Projekt
Nun hält dich auch nichts mehr davon ab das erste Flutter Projekt zu erstellen und anzusehen. Wechsle dazu über die Konsole oder das Terminal in den Ordner, in dem du das Flutter Projekt erstellen willst und führe folgenden Befehl aus:
flutter create hello_world_flutter
In der Konsole solltest du dann folgende Ausgabe sehen:
Nach dem Generieren des Codes mit den folgenden Befehlen das Projekt starten:
cd hello_world_flutter
flutter run
Wenn der iOS Simulator oder der Android Emulator nicht verfügbar sind, sollten mindestens die macOS/Windows oder Chrome zur Auswahl als Device zur Verfügung stehen:
Ich habe jetzt Chrome gewählt und das Flutter Counter Projekt ist in meinem Browser zu sehen:
So, nun steht dem Coden nichts mehr im Weg.
Nächste Schritte
Nun ist Flutter installiert und es juckt in den Händen die erste App zu schreiben. Neben den unzähligen Tutorials kann ich dir die folgenden beiden Schritte empfehlen:
Flutter Codelab
Im Flutter Codelab wirst du an die ersten Widgets herangeführt und hast nach dem Tutorial deine erste kleine App am Laufen.
Flutter Schulung
Wenn du einen schnellen und intensiven Start in die App-Entwicklung von Flutter haben möchtest, kann ich dir auch unsere Flutter Grundlagen Schulung empfehlen. Ich selbst bin einer der Trainer in der Schulung und wir bieten diese über flutter.de an: https://flutter.de/schulung/flutter-schulung.html
Ich wünsche viel Spaß bei der App-Entwicklung 🥳