Flutter schnell und einfach installieren (Windows, Mac oder Linux)

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.

Flutter auf Windows, Mac oder Linux installieren

Diese Anleitung besteht aus mehreren Teilen:

1. Installation von Flutter über Community Packages
2. Installation der IDE (VS Code, Android Studio und evtl. Xcode)
3. Überprüfung, ob alle Installationen vollständig sind und funktionieren
4. Erstes Flutter Hello World Projekt
5. Nächste Schritte

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.

Installation von Flutter für Windows

Für Windows brauchen wir den Packagemanager von Chocolately (https://chocolatey.org/install). 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 folgende Befehl ein:

flutter update

Installation von Flutter für Mac

Der erste Schritt ist hier den Packagemanager Homebrew (https://brew.sh/) 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 als letztes absetzen:

flutter update

Installation von Flutter für Linux

Für Linux brauchen wir den Packagemanager von Snapcraft. Dieser kann hier heruntergeladen werden: Snapcraft herunterladen (https://snapcraft.io/). Sobald dies erledigt ist, gib einfach in der Konsole folgendes ein:

sudo snap install flutter --classic

Und ta-da! Flutter ist installiert. Zuletzt nur noch einmal prüfen ob Flutter auch in der aktuellsten Version installiert wurde:

flutter update

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. Dieser ist auch für alle Plattformen verfügbar. Dafür musst du VS Code einfach nur über die Webseite herunterladen und installieren.

VS Code mit Flutter Plugin und Terminal

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 die 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, denn nur damit kannst du den iPhone Simulator starten. Xcode kannst du einfach aus dem Apple App Store herunterladen. Dieser Vorgang wird einige Zeit in Anspruch nehmen, meißtens 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 diese herunterzuladen, gib hierfür einfach folgenden Befehl in die Konsole ein (auch hier solltest du vorher Homebrew installiert haben):

brew install cocoapods

Die Xcode Installation ist hiermit vollständig.

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:

flutter — version: Angabe der installierten Flutter und Dart Version

Falls du eine ältere Version von Flutter installiert hast wirst du folgendes in der Console sehen:

flutter — version: Information über veraltetes Flutter zu sehen.

Wenn der Befehl flutter nicht erkannt wurde, ist wohl leider 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 in die Console absetzen:

flutter update

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.

flutter doctor: Information über alle notwendigen und installierten Flutter Tools

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. Dazu das mitgelieferte erste Hello World Projekt erstellen mit dem folgenden Befehl:

flutter create hello_world_flutter

In der Console solltest du dann folgende Ausgabe sehen:

Erstellen der Counter App als erstes Hello World

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:

Device-Auswahl für die Flutter App (Chrome oder MacOS)

Ich habe jetzt den Chrome gewählt und das Flutter Counter Projekt ist in meinem Browser zu sehen:

Hello World Flutter Counter App im Browser

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 folgende beide Schritte empfehlen:

Flutter Codelab

Flutter Codelab Einführung in die App Entwicklung

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

Flutter Deutschland

Ich wünsche viel Spaß bei der App-Entwicklung 🥳

Originally published at https://flutter.de on January 17, 2022.