Flutter – Erste Eindrücke zur neuen Cross-Plattform-Technologie

Flutter ist die neueste Technologie am Markt, die „Cross-Plattform-Entwicklung“ verspricht. Plattformunabhängige Entwicklung ist wohl der Traum eines jeden Entwicklers, der sich mit mobilen Applikationen befasst. Eine Codebasis für Logik und Oberfläche, somit reduzierter Aufwand bei Entwicklung und Wartung und damit reduzierte Arbeitszeiten. Bei solchen Vorstellungen bekommen selbst Buchhaltung und Controlling weiche Knie. Tatsächlich gibt es bereits zahlreiche Technologien am Markt, die sich eben diese Punkte, oder zumindest Teile davon, zum Ziel gemacht haben. So zum Beispiel React-Native. Doch offensichtlich konnte sich keine dieser Technologien endgültig gegen reine Android oder iOS Entwicklung durchsetzen. Seit Anfang dieses Jahres befindet sich Flutter in der Betaphase. Dabei handelt es sich erneut um eine Technologie, die „schnelle Entwicklung“ und „native Performance“ mit nur einer Codebasis für iOS und Android verspricht (https://flutter.io/). Doch wie schlägt sich Flutter im Einsatz?

Flutter stammt aus dem Hause Google und basiert auf Dart. Wie für Google typisch, ist die Doku rund um Flutter durchaus gelungen. Vom Einstieg bis zum ersten lauffähigen Klickprototypen findet sich eine Schritt-für-Schritt-Anleitung unter https://flutter.io/get-started/install/. Außerdem bietet Google unter dem Google Developers Channel auf Youtube eine ganze Reihe von Videos zu Flutter.

Interessant wird es sobald der Prototyp läuft und man erste beworbene Funktionen, wie die „hot-reload“-Funktion, testen kann. Tatsächlich funktioniert die Aktualisierung nach Änderungen im Code, sowohl auf dem Emulator als auch auf angeschlossener Hardware recht gut und zuverlässig. Verzögerungen gibt es erst, wenn die App abstürzt oder man sie aus anderen Gründen beendet. Beim kompilieren mittels Befehl „flutter run“ erfolgt ein Vergleich mit der letzten Version. Dieser Vergleich funktioniert jedoch äußerst unzuverlässig, sodass oftmals eine Version auf dem Gerät/Emulator startet, die eigentlich längst nicht mehr aktuell ist. Es führt kein Weg daran vorbei mittels des Befehls „flutter clean“ den gesamten build-Ordner zu löschen. Bis die App danach wieder gestartet ist kann durchaus eine Minute vergehen. Während der Entwicklung einer App mag dies für den Einen oder Anderen ein Störfaktor sein.

Zunächst etwas mehr Theorie: Flutter basiert auf reaktiver Programmierung. Der Datenfluss lässt sich somit als Baumstruktur auffassen. Änderungen an einem Element in dieser Struktur werden automatisch auch an Kind-Elemente propagiert. Google bezeichnet diese Baumstruktur als „widget tree“, wobei Widgets vorgefertigte Elemente sind, die es zum Beispiel ermöglichen die Position eines Elements festzulegen. Eine Übersicht über bestehende Widgets findet sich unter: https://flutter.io/widgets/. Natürlich führt kein Weg daran vorbei eigene Widgets zu erstellen, dafür gibt es die zwei Basisklassen „Stateless Widget“ und „Stateful Widget“.

Beispiel: Stateless Widget

Ein „Stateless Widget“ ist eine statische Klasse. Im Beispiel wird ein Widget erzeugt, das einen Text mit der Schriftgröße 15 in der Mitte zentriert anzeigt. Der Text wird dabei von einem Elter-Widget übergeben. Was angezeigt wird, kann sich somit zwar zur Laufzeit ändern, muss dabei aber von außen induziert werden.

Beispiel: Stateful Widget

Dies ist auch der entscheidende Unterschied zu einem „Stateful Widget“. Die Methode „setState“ aus dem Beispiel verändert mit jedem Aufruf den Zustand des Widgets. Diese Änderung wird auch an Kind-Elemente weitergegeben und erzeugt diese wo notwendig neu.

Etwas gewöhnungsbedürftig an den Widgets ist vor allem das Layouting. So gibt es z.B. ein Padding-Widget, welches wie der Name schon verrät, lediglich dazu dient, ein Padding um ein Kind-Element zu erzeugen. Gleichzeitig gibt es aber auch ein Container-Widget, das unter anderem auch ein Padding um ein Kind-Element erzeugen kann. Hier bedarf es unter Umständen einer gewissen Einarbeitungszeit, bis man eine Übersicht über die vielzähligen Widgets gewonnen hat. Positiv dahingegen ist die einfache Verwendung von Elementen mit Material Design: https://flutter.io/widgets-intro/#using-material-components.

Ein anderes Thema ist die Datenhaltung. Ein „Stateful Widget“ stößt an seine Grenzen, sobald Daten über mehrere Ebenen in der Baumstruktur nach unten gegeben werden müssen oder wenn ein Kind-Element den Zustand eines Elter-Elements verändern soll. Flutter bietet als eigenen Lösungsansatz ein so genanntes „InheritedWidget“ (https://docs.flutter.io/flutter/widgets/InheritedWidget-class.html). Wie dieses zur Datenhaltung verwendet wird, erklärt ein User auf Stack Overflow sehr anschaulich: https://stackoverflow.com/a/49492495.

Darüber hinaus gibt es auch andere Ansätze, wie z.B. Redux, was den ein oder anderen Javascript / React Entwickler freuen dürfte. Eine Übersicht findet sich in folgendem Repository auf GitHub: https://github.com/brianegan/flutter_architecture_samples.

Generell ist das Widget-Konzept einfach nachvollziehbar, der Datenfluss ist klar ersichtlich und Elemente lassen sich mittels dieses Konzepts gut strukturieren. Auch die Ansicht auf iOS und Android Geräten überzeugt. Flutter schafft es Nachbesserungen am Design obsolet zu machen und geht damit einen großen Schritt in Richtung „Single-Codebasis“. Eine Übersicht über bestehende Apps, die Flutter verwenden, findet sich unter https://flutter.io/showcase/. Wer gerne selbst ein Layout zusammenstellen und den zugehörigen Code generieren lassen möchte, der kann dies auf folgender Seite ausprobieren: https://flutterstudio.app/.

Zum Abschluss noch ein paar Gedanken zur Zukunft dieser neuen Technologie. Ob sich Flutter durchsetzt hängt in meinen Augen vor allem von zwei Faktoren ab: Zum einen, wie es mit Fuchsia weiter geht, dem neuen Betriebssystem von Google, das auf Flutter basiert. Sollte Fuchsia tatsächlich Android ersetzen, würde dies einen enormen Zuwachs der Flutter-Community einläuten. Womit wir beim zweiten Punkt ankommen. Aktuell ist die Community rund um Flutter sehr klein. Es gibt wenig Plugins und Bibliotheken, was viele Entwickler-Teams zunächst abschrecken dürfte. Je nachdem, wie sich diese Punkte in nächster Zeit entwickeln, wird sich Flutter etablieren können oder nicht.