Update
Dieser Artikel ist nicht mehr aktuell. Wenn du eine Anleitung für eine schnelle und sehr einfache Installation haben möchtest dann schau gerne hier:
Flutter First Steps
Flutter ist ein Cross-Plattform Framework, das dir den schnellen Einstieg in die Appentwicklung ermöglicht. In diesem Artikel zeige ich allen, die Flutter lernen wollen, wie sie die Entwicklungsumgebung schnell einrichten können, um direkt mit dem Programmieren loslegen zu können. Dazu müssen für Android und iOS unterschiedliche Tools installiert werden. Ziel ist es, dass du nach dieser Anleitung dein Flutter “Hello World” Programm in einem Simulator bzw. Emulator ansehen kannst.
Ablauf der Installationsanleitung
iOS Abhängigkeiten installieren
Android Abhängigkeiten installieren
Flutter installieren
Demo Projekt für iOS erstellen und im Simulator ansehen
Diese Beispielinstallation wurde auf einem MacBook durchgeführt. Für Windows und Linux unterscheidet sich die Installation ggf. etwas an der einen oder anderen Stelle.
iOS Abhängigkeiten installieren
Neuestes Xcode via Apple App-Store installieren (kann eine ganze Weile dauern - man braucht hier einwenig Geduld) oder hier herunterladen: https://itunes.apple.com/us/app/xcode/id497799835
Apple Commandline Developer Tools installieren
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Ermöglichen, dass man direkt on-device testen kann und cocoapods installieren, um Libraries für iOS Anwendung nutzen zu können. Die ausführlichen Erklärungen findest du im jeweiligen git Projekt von usbmuxd, libimobiledevice oder cocoapods.
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
iOS Simulator starten Folgenden Befehl in der Konsole eingeben, um den iOS Simulator zu starten und anschließend zu verwenden:
open -a Simulator
Android Abhängigkeiten installieren
Android Studio installieren https://developer.android.com/studio/index.html
Android Studio starten und durch den “Android Studio Setup Wizard” durchklicken, bis alle weiteren Abhängigkeiten installiert wurden \
3. Android Studio öffnen und auf dem initialen Dialog Configure -> Plugins anklicken \
4. Im Marketplace nach dem Plugin “Flutter” suchen und installieren. Es weist darauf hin, dass Flutter das Plugin Dart benötigt und auch gleich mit installieren möchte: \
5. “Neues Flutter Projekt” auswählen und den Wizard bis zum Ende mit den Default durchklicken. Das Projekt wird erfolgreich generiert. \
6. Den AVD Manager öffnen: Hauptmenü -> Tools -> AVD Manager. Im Dialog anschließend “Create Virtual Device” anklicken: \
Beliebige Hardware auswählen, “Next” klicken um das Image auszuwählen. Für den Start einfach das aktuellste Image auswählen (ganz oben in der Liste) und wieder “Next” klicken. Im letzten Dialog “Verify Configuration” die Installation des Virtuellen Devices mit “Finish” starten. Das Herunterladen der Imagedatei kann eine Weile dauern. Anschließend wird das Device aufgelistet: \
7. Mit dem “Play” Button in der Actions Spalte kann das Device gestartet werden: \
Flutter installieren
Das Flutter SDK wird für Windows, MacOS und Linux angeboten. Ich habe das SDK für MacOS heruntergeladen, was sich gerade bei der Version v1.5.4-hotfix.2 befindet. Das aktuelle Flutter SDK kannst du auf flutter.dev herunterladen: https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
Das Flutter Zip an einem zentralen Ort entpacken und die $PATH Variable auf den entpackten Ordner /bin setzen. Um den Pfad permanent zu setzen, muss in der .bash_profile der volle Pfad angegeben werden. Bei mir ist folgender Eintrag hinzugekommen:
export PATH="$PATH:/Users/markus/development/flutter/bin"
Den Befehl flutter doctor ausführen, um zu sehen, welche Abhängigkeiten fehlen.
Erstes Demo Projekt erstellen
Um zu testen, ob die Flutter Installation sowie der iOS Simulator und Android Emulator funktionieren, erstellen wir jetzt ein erstes Demo Projekt und wollen es auf den beiden Zielplatformen sehen. Dazu führen wir folgende Schritte aus:
In einen Ordner wechseln, in dem das erste Flutter Projekt erstellt werden soll
Flutter Demo Projekt erstellen: flutter create mein_erstes_projekt Wichtig ist, dass der Name der Dart Package Konvention entspricht (lowercase und underscore Es werden eine ganze Menge Dateien generiert.
Demoprojekt starten: cd mein_erstes_projekt flutter run
Wenn noch kein Emulator gestartet wurde, erscheint die Meldung “No connected devices.” \
Auch der Befehl flutter doctor zeigt den entsprechenden Hinweis “! No devices available” \
Der Befehl flutter emulators zeigt nach einer erfolgreichen Installation von iOS und Android auch die installierten Emulatoren an.
Demo Projekt im iOS Simulator ansehen
iPhone Simulator starten: flutter emulators --launch apple_ios_simulator Der iPhone Simulator ist nun zu sehen.
In das Projektverzeichnis wechseln und das Flutter Projekt starten: cd mein_erstes_projekt/ flutter run
Fazit
Um die Entwicklungsumgebung zum Laufen zu bringen, braucht man doch etwas Zeit, vor allem für xCode. Aber sind erst einmal alle Abhängigkeiten installiert, sieht man sehr schnell das erste Flutter Programm. Anschließend kann man sich vom Live Hot Code Replacement verzücken lassen und immer tiefer in die Welt von Flutter eintauchen.
Viel Spaß beim Entwickeln der nächsten App :)