© Rosalie Kreule/Shutterstock.com
Wege zur mobilen App – Teil 3

Zur App flattern


Flutter ist ein Ansatz aus dem Hause Google, um Apps für Android und iOS zu erstellen. In unserer kleinen Serie über moderne und alternative Ansätze zur Programmierung von Apps darf Flutter daher nicht fehlen. Wie ist das Entwicklungsmodell? Auf welche Art und Weise wird das User Interface (UI) erstellt und wie funktioniert das mit beiden Plattformen? Wir haben die Antworten und ein paar Einblicke aus der Praxis zusammengestellt.

In diesem Artikel geht es erneut um das Thema plattformübergreifende Programmierung für mobile Geräte. Dieses Mal steht das Open Source Framework Flutter aus dem Hause Google [1], mit dem man mobile Anwendungen für iOS und Android entwickeln kann, auf dem Programm. Gewissermaßen steht es auch als Alternative zur nativen Entwicklung mit Java bzw. Kotlin für Android bereit und deckt gleichermaßen auch iOS als mobile Plattform mit ab. Als Programmiersprache kommt Dart zum Einsatz, die ebenfalls von Google entwickelt wurde. Wir müssen uns also neben einem neuen Ansatz (Flutter) auch mit einer anderen Programmiersprache auseinandersetzen. Dennoch erscheint die Vorgehensweise vielversprechend.

Technisch handelt es sich bei den mit Flutter programmierten Apps um native Applikationen. Vor der Veröffentlichung bzw. Installation auf dem Endgerät erfolgt ein Kompilieren des Quellcodes in ausführenden Code für die ARM-Architektur, also den Prozessoren der mobilen Geräte. Das Rendering des UI erfolgt über die C++ 2D Rendering Engine Skia, die u. a. auch in Google Chrome, Mozilla Firefox und anderen Programmen verwendet wird. Damit sollte die Performance ausreichend sein, um auch anspruchsvolle UIs umzusetzen. Flutter geht dabei so vor, dass nur derjenige Teil des Interface neu gerendert wird, der von einer Änderung des Zustands (zum Beispiel einem Update von Daten) beeinflusst wird. Flutter bietet ein umfassendes Software Development Kit (SDK) von Widgets zur Implementierung der Benutzeroberfläche. Bevor wir einsteigen, sehen wir uns die Vor- und Nachteile von Flutter an. Auf der Habenseite können wir notieren:

  • Widget-Katalog: Viele Basis-elemente zum Erstellen des UI sind bereits im SDK von Flutter vorhanden, beispielsweise Elemente für eine Tableiste, einen Button usw.

  • Performance: Die erstellten Apps sind bezüglich der Performance ähnlich performant wie native Apps, die mit Android Studio bzw. Xcode erstellt wurden. Man muss aber hinzufügen, dass man diese Tatsache nur bedingt überprüfen kann. Dafür müssten zwei identische Apps erstellt und deren Laufzeiteigenschaften, Speicherplatzbedarf usw. verglichen werden. Meist genügt uns jedoch ein subjektives Gefühl. Außerdem sind die Anforderungen an die Performance bei immer leistungsfähigerer Hardware nicht mehr so prioritär.

  • Dart: Moderne Programmiersprache mit Ähnlichkeiten zu anderen modernen Sprachen. Demzufolge sollte der Wechsel hier nicht allzu schwerfallen.

  • Hot Reload: Änderungen im Quelltext werden direkt übernommen, ohne dass man die App komplett neu starten muss. Das kann den Entwicklungsvorgang beschleunigen, insbesondere das Erstellen der Screens. Es ist von besonderer Bedeutung, wenn man keinen interaktiven Designer zur Verfügung hat.

Wo Licht ist, da ist auch Schatten, d. h., Flutter ist nicht frei von Kritikpunkten:

  • Mitgelieferte Module werden kompiliert: Erfolgt ein Update des Betriebssystems mit neuer Designsprache für die Benutzeroberfläche, muss Flutter erst noch aktualisiert werden. Danach benötigt die App ein Update. Der Grund ist, dass Flutter die Widgets selbst zeichnet und nicht auf Elemente von Android und iOS zurückgreift.

  • Neuer Ansatz: Eine Dokumentation und die verfügbaren Beispiele sind noch nicht so umfangreich vorhanden. Ausgangspunkt ist üblicherweise die Dokumentation des SDK und der Klassen auf dem offiziellen Webportal des Frameworks.

  • Stark verschachtelter Code: Der Quellcode für die Beschreibung des UI und der Funktionscode sind in einer Datei gemischt, wodurch die Übersichtlichkeit leiden kann. Grundsätzlich ist eine Verlagerung von Quellcodebestandteilen möglich, aber nicht zwingend vorgesehen. Hier braucht es einige Disziplin von Seiten des Entwicklers, damit man in größeren Projekten den Durchblick behält. Die Entwicklungsumgebung (Android Studio) unterstützt hier jedoch bestmöglich durch eine strukturierte und automatisierte kommentierte Quellcodedarstellung.

Die Hardware der mobilen Geräte wird über ein Plug-in-Konzept angebunden. Hier wird sich im Laufe der Zeit zeigen, wie leistungsfähig dieses Vorgehen sein kann, und auch, ob beide Systeme, d. h. Android und iOS, gleichermaßen unterstützt werden. Ebenso wird es für die Zukunft des Frameworks wichtig sein, dass auch exotischere Hardware mit speziellen Sensoren mit vertretbarem Aufwand angebunden werden können. Wichtig: Fertig kompilierte Apps können mit Flutter direkt in den App Store und den Google Play Store hochgeladen werden.

bochkor_app_entwicklung_teil3_1.tif_fmt1.jpgAbb. 1: Konsole von Flutter
bochkor_app_entwicklung_teil3_2.tif_fmt1.jpgAbb. 2: Der Flutter Doctor prüft die Systemkonfiguration
bochkor_app_entwicklung_teil3_3.tif_fmt1.jpgAbb. 3: Plug-ins in Android Studio für Flutter und Dart
bochkor_app_entwicklung_teil3_4.tif_fmt1.jpgAbb. 4: Android-Emulator mit besonderen Einstellungen für die Entwicklung mit Flutter

Entwicklungs- und Systemumgebung einrichten

Entwickeln kann man unter Windows, macOS, Linux oder ChromeOS. Für alle Szenarien finden sich auf der Webseite des Frameworks [2] entsprechende Installationsanleitungen. In der Editorfrage hingegen ist man mit Flutter nicht festgelegt. Grundsätzlich kann jeder beliebige Editor genutzt werden. Für Android Studio und Visual Studio Code stellt Google jedoch Plug-ins zur Verfügung, die das Arbeiten mit Flutter vereinfachen. Man sollte also – zumindest für den Einstieg – i. d. R. einen der beiden Editoren einsetzen. Für das hier behandelte Beispiel wird Android Studio genutzt, denn wie Flutter kommt auch diese Entwicklungsumgebung aus dem Hause Google. Als Betriebssystem verwenden wir Microsoft Windows 10. Folgende Schritte sind notwendig, um eine Entwicklungs- und Systemumgebung aufzusetzen:

  1. Installation von Git: Flutter und die produktive Entwicklung benötigen Git. Das ist ggf. schon auf dem Rechner installiert. Über die Kommandozeile kann dies mit Hilfe des Befehls git --version überprüft werden.

  2. Flutter SDK: Das SDK muss in der aktuellen Version heruntergeladen und extrahiert werden (zip-Datei). Flutter-Befehle werden nun über die Flutter-Konsole ausgeführt, die man mittels flutter_console.bat startet (Abb. 1). Um mit der Kommandozeile effizient zu arbeiten, sollte man den Ordner des Flutter-Verzeichnisses der PATH-Umgebungsvariable seines Betriebssystems hinzufügen (in Windows über die Systemeinstellungen zu erreichen).

  3. Entwicklungsumgebung: Die aktuelle Version von Android Studio muss installiert sein, das ist (Stand: August 2020) Version 4.0, vorliegend als integrierte Entwicklungsumgebung (IDE). Zusammen mit der IDE sollten auch das Android SDK und die Plattformtools auf dem Rechner eingerichtet werden.

  4. Systemprüfung: Mit dem Tool Flutter Doctor ist es möglich, die Flutter-Umgebung und deren Abhängigkeiten zu prüfen. Das Programm ist über die Konsole mit dem Befehl flutter doctor -v ausführbar. Hier erhält man Hinweise, an welchen Stellen der Installation und/oder der Konfiguration noch nachgebessert werden muss. Es ist erst dann sinnvoll, die Entwicklungsumgebung zu ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang