© Excellent backgrounds/Shutterstock.com
App-Entwicklung mit Googles Cross Platform Framework

Mach die Flutter!


Google veröffentlichte 2017 die erste Alphaversion eines neuen Frameworks zur Entwicklung von plattformunabhängigen mobilen Applikationen. Das auf den Namen Flutter getaufte Framework basiert auf der Programmiersprache Dart und verfolgt einen anderen Ansatz als bisherige Frameworks, wie beispielsweise Facebooks React Native oder Native Script von Telerik. Seit Dezember 2018 hat das Projekt Version 1.0 erreicht.

Flutter tritt an, um die plattformunabhängige App-Entwicklung zu vereinfachen. Anders als bereits existierende Frameworks verwendet Flutter nicht die nativen UI-Komponenten der Plattformen. Zum Zeichnen der Komponenten wird eine eigene Rendering-Engine namens Skia [1] benutzt. Damit das Look and Feel der jeweiligen Plattformen gewährleistet ist, hat das Flutter-Team alle wichtigen Elemente von iOS und Android nachgebaut (wobei iOS etwas stiefmütterlich behandelt wird, Androids Material Design dagegen erwartungsgemäß gut umgesetzt ist). Was im ersten Moment wie ein Nachteil klingt, ist bei Apps mit eigenem Design und Branding keiner mehr. Hier hat Flutter eindeutig seine Stärken. Was das im Einzelnen bedeutet, sehen wir im weiteren Verlauf des Artikels genauer. Doch so viel vorab: Ein UI-Design-Editor wird bei Flutter nicht mitgeliefert. Weder Xcodes Storyboard noch Androids Layouteditor werden unterstützt. Die Beschreibung des UI ist, ähnlich wie bei React oder VueJS, im Quellcode verankert. Das macht Flutter vor allem für Entwickler sehr intuitiv und einfach zu erlernen und ist weniger tragisch, als es im ersten Moment erscheint.

Dart?

Flutter basiert auf Googles hauseigener Programmiersprache Dart [2]. Version 1.0 ist 2013 erschienen, inzwischen ist Version 2.0 aktuell. Dart hat den Anspruch, für die Web- und App-Entwicklung eine einfache, schnell zu erlernende und robuste Programmiersprache zu sein. Eine klare Syntax, viele bereits enthaltene Core-Module und ein großes Ökosystem von verfügbaren Paketen tragen ebenso dazu bei wie eine aktive Community.

Die Sprachsyntax ähnelt der von C, sodass der Umstieg von Sprachen wie C/C++, Java oder JavaScript schnell zu schaffen ist. Dart ist streng typisiert und objektorientiert. Durch die Kompilierung zu ARM- und x86-Code sind Dart-Programme auf mobilen Betriebssystemen, wie Android oder iOS, ausführbar. Ein Dart Transpiler sorgt für die Konvertierung in JavaScript-Code, was Dart auch im Web zu einer Alternative machen soll. Dart kann den Quelltext in zwei Varianten kompilieren:

  • JIT: Wie bei JavaScript wird der Code just in time während der Ausführung kompiliert bzw. interpretiert. Das ermöglicht ein Hot Reloading der Programme während der Entwicklung. Auf diesen nicht unerheblichen Vorteil während der Entwicklung kommen wir später zurück.

  • AOT: Ahead-of-Time-Kompilierung erstellt nativen ARM- oder x86-Code, der so die Ausführung auf den Endgeräten ermöglicht und damit erst die Distribution als App. Bekanntermaßen erlauben manche Plattformen keinen Interpreter in einer App.

Entwicklungsumgebung einrichten

Bevor wir mit der Entwicklung starten können, müssen wir das Flutter SDK [3] installieren. Die Installation ist einfach und im Vorgehen für die verschiedenen Betriebssysteme sehr ähnlich. Hinweis: Wer iOS-Apps mit Flutter entwickeln möchte, muss naturgemäß einen macOS-Rechner besitzen.

Die Installation erfordert den Umgang mit einer Konsole, ganz egal auf welchem Betriebssystem. Im ersten Schritt laden wir uns das Flutter SDK für unser Betriebssystem herunter und entpacken es in ein beliebiges Verzeichnis. Unter Windows führen wir noch die flutter_console.bat auf der Konsole aus. Anschließend fügen wir das Verzeichnis unserer Path-Variable hinzu. Um zu prüfen, welche anderen Tools und SDKs fehlen, führen wir in der Konsole flutter doctor aus. Damit werden die bereits vorhandenen SDKs für Android oder iOS gesucht. Zudem wird gegebenenfalls auf weitere fehlende Libraries oder Tools hingewiesen (Abb. 1).

sandtner_flutter_1.tif_fmt1.jpgAbb. 1: Flutter Doctor

Wer iOS-Simulatoren benutzen möchte, muss noch entsprechende Schritte zur Konfiguration durchführen. Die Dokumentation [4] ist an dieser Stelle vorbildlich; dasselbe gilt für Android [5]. Wurde das SDK installiert, kann die IDE entsprechend konfiguriert werden. Die Flutter-Dokumentation bietet dazu ausführliche Anleitungen [6] für Android Studio und Visual Studio Code.

Die Anatomie einer Flutter-App

Wie eingangs erwähnt, wird das User Interface (UI) einer Flutter-Anwendung im Code beschrieben. Dieser deklarative Ansatz ist vor allem für Entwickler leicht zu verstehen. Das Framework verwendet sogenannte Widgets, die die Grundlage aller Applikationen bilden. Die zentrale Idee ist, das UI durch die Kombination von Widgets zu erstellen. Jedes Widget ist eine Beschreibung eines Teils des UI. Eine Aufteilung in Views, Models, Layouts und Controller ist in Flutter nicht vorgesehen. All das ist vereint in einem Objekt, dem Widget. Das Framework ist in verschiedene Schichten aufgeteilt, in Abbildung 2 ist der grundlegende Aufbau dargestellt.

sandtner_flutter_2.tif_fmt1.jpgAbb. 2: Aufbau des Frameworks

Im Allgemeinen haben wir bei der App-Entwicklung überwiegend Kontakt mit der Framework-Schicht, die in Dart implementiert ist. In der Dokumentation [7] sind die verfügbaren APIs für alle Schichten beschrieben. Die Schichten unterhalb des Frameworks sind in C/C++ (Engine-Schicht) bzw. in den plattformspezifischen Sprachen (Embedder-Schicht) implementiert. Der Zugriff auf diese Schichten ist über ein Dart API möglich. In der fortgeschrittenen Entwicklung gibt es Fälle, in denen der Zugriff auf plattformspezifische APIs notwendig ist.

Um einen besseren Eindruck von der App-Entwicklung mit Flutter zu bekommen, wollen wir anhand einer einfachen Beispielapplikation die grundlegenden Konzepte des Frameworks beleuchten. Das Beispiel verwendet das API des Comicverlags Marvel [8], um die letzten zwanzig Spider-Man-Comics in umgekehrter Reihenfolge aufzulisten. Durch einen Tap auf eine Ausgabe in der Liste werden Details angezeigt. Der vollständige Quelltext ist auf GitHub [9] zu finden. Wie die App am Ende aussehen soll, ist in Abbildung 3 und 4 zu erkennen.

sandtner_flutter_3.tif_fmt1.jpgAbb. 3: Startscreen der Comicapplikation
sandtner_flutter_4.tif_fmt1.jpgAbb. 4: Detailansicht mit „Close“-Button

Beginnen wir mit der Implementierung. Um den Start zu vereinfachen, legen wir das neue Projekt mit Hilfe des Plug-ins in der IDE an. Wir benutzen Visual Studio Code mit den installierten Dart- und Flutter-Plug-ins. Um das neue Projekt zu erstellen, öffnen wir die Command-Palette und wählen Flutter: New Project aus. Nach Eingabe eines Projektnamens (z. B. Spider-Man-Comics) und Auswahl eines Speicherorts legt das Plug-in alle notwendigen Dateien an. Dazu gehört ein Beispielprojekt, das ohne Probleme kompilieren sollte. Kommt es zu Fehlern beim Ausführen, ist flutter doctor ein nützlicher Hinweisgeber.

Der Einstiegspunkt jeder Flutter-App ist die Datei lib/main...

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

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang