Flutter

Flutter ist ein mobiles UI-Framework für die Plattform-übergreifende Entwicklung von Apps für mobile Endgeräte. Damit ist es möglich, mit einer einzigen Codebase eine App zu entwickeln, die sowohl auf iOS als auch auf Android funktioniert. Das Open Source Framework wurde im Januar 2018 von Google in der Betaversion veröffentlicht und war bereits Anfang Dezember des gleichen Jahres als Version 1.0 verfügbar. Flutter 1.0 galt als erste stabile Version, seit 2019 ist Flutter 1.2 erhältlich[1]. Das App-Entwickler-Kit ist in Konkurrenz zu etablierten Frameworks wie Xamarin und React Native getreten[2] [3].


Definition

Die Open Source Software wird von Google kostenlos bereitgestellt. Damit lassen sich in kürzester Zeit Apps programmieren, die von den Native Interfaces sowohl iOS’ als auch Androids unterstützt werden. Ziel der in C/C++ und Dart verfassten Software ist es, den Entwicklungsprozess von Web- und mobilen Apps zu beschleunigen sowie die Applikationen zu verschlanken. Das wird unter anderem durch die Integration der Hot Reload Funktion oder den Einsatz flexibler User Interfaces, Animation-Librarys und erweiterbarer Schichtenarchitektur erreicht[4] [5].

Flutter besteht aus zwei wichtigen Komponenten:

  • einem Software Development Kit (SDK) und
  • einem Framework (Widget-basierte UI-Library).


Abgrenzung zu anderen Frameworks

Von anderen Frameworks unterscheidet sich Flutter unter anderem deshalb, weil es weder WebView noch OEM-Widgets verwendet, die sich ab Werk auf dem Endgerät befinden[6]. Wenn eine Native App mit der Plattform interagiert, um ein Widget zu erstellen, greift sie in der Regel auf die OEM-Widgets (Original Equipment Manufacturer Widgets) auf dem Smartphone oder Tablet zurück. Bei Flutter entfällt dieser Zwischenschritt. Das Framework nutzt stattdessen die eigene Hochleistungsrender-Engine Skia, um die notwendigen Widgets zu kreieren[7]. Die Open Source Grafik-Library zur Erstellung von 2D-Grafiken verbindet sich über Schnittstellen mit den jeweils vorhandenen, Betriebssystem abhängigen, nativen Software Development Kits.

Flutter wird mit Hilfe von Ahead-of-time-Compilern (AOT-Compiler) ausgeführt. Lediglich in der Entwicklungsphase wird für schnellere Testprozesse auf Just-in-time-Compiler (JIT-Compiler) zurückgegriffen. Jede auf Flutter basierende App ist aus Container-[8], Text-[9], Image-, Icon-[10] und anderen Widgets zusammengesetzt, die auf einem von der Grafik-Library Skia betriebenen Canvas-Element einzeln interpretiert und dargestellt werden. Die Plattform analysiert die so konstruierten Widgets dann und leitet die durch die Interaktion des Endusers provozierten Events an die App weiter.


Architektur

In groben Zügen erinnert Flutters Architektur an die von Android. Das Framework ist im Wesentlichen aus drei Prozess-Einheiten (Macroblocks)[11] konstruiert. Diese bestehen ihrerseits aus für jeden Layer charakteristische APIs und Librarys. Die Struktur hilft, den Code möglichst schlank zu halten.

Embedder

Auf der niedrigsten Ebene und im Herzstück der Engine werden die Plattform spezifischen Embedder definiert. Deren Aufgabe ist es, das Rendering mit der nativen Bildschirminformation, den Input-Events, usw. zu verbinden. Hierzu interagieren die Embedder über einfache C/C++-APIs mit dem Engine-Layer. Diese APIs werden jedoch nur intern abgebildet. Dieser Layer setzt sich aus einer Shell, einem Mensch-Maschine-Interface, zusammen, die Darts virtuelle Maschine (DartVM)[12] beherbergt. Diese Shell ist Plattform-spezifisch und bietet Zugriff auf die dazugehörigen, nativen APIs. Sie implementieren Betriebssystem-spezifische Codes, wie etwa die Kommunikation mit dem Input Method Editor (IME) und den Lifecycle Events der App.

Die eigentliche Architektur jedoch besteht aus zwei Elementen: der Engine und dem Framework[13]:

Engine

Der mittlere, in C/C++ verfasste Layer von Flutter beinhaltet vielfältige Komponenten, die für die Funktionalität des Frameworks und dessen grundlegenden Betrieb ausschlaggebend sind. Dazu zählen unter anderem auch die Grafik-Engine Skia und die Shells, auf die man über die von der dart:ul Library dargestellten APIs Zugriff erhält. Unter Verwendung der definierten Klassen in dieser Library, wie Canvas, Paint und TextBox, ist es möglich, eine App zu optisch gestalten.

Framework

Das ist der wichtigste Layer, der alle Librarys und Pakete beherbergt, die für die Entwicklung einer App notwendig sind. Das Framework ist die Komponente, die in Dart programmiert ist[14]. Hier befinden sich etwa die Layer zur Animation, zur Festlegung der Bedienung sowie zur Erstellung der Widgets. Letztere erlauben die Definition der Material- (Android) und Cupertino-Layer (iOS) zur Realisation der Grafikkomponenten gemäß dem Stil der Betriebssysteme, bzw. die Definition personalisierter Widgets.


Einzelnachweise

  1. Flutter 1.2: Das hat sich im ersten stabilen Release-Update getan t3n.de. Abgerufen am 10.01.2020.
  2. The revolutionary cross-platform mobile development framework: is it Flutter 1.0? MaddAppGang.com. Abgerufen am 10.01.2020.
  3. Cross-Plattform-Apps entwickeln: React Native, Flutter und Co. Entwickler.de. Abgerufen am 10.01.2020.
  4. Hot reload flutter.dev. Abgerufen am 10.01.2020.
  5. animation.library api.flutter.dev. Abgerufen am 10.01.2020.
  6. Why Flutter Doesn't Use OEM Widgets medium.com. Abgerufen am 10.01.2020.
  7. Skia Graphics Library skia.org. Abgerufen am 10.01.2020.
  8. Flutter Widgets 01 | Container medium.com. Abgerufen am 10.01.2020.
  9. Text widgets flutter.dev. Abgerufen am 10.01.2020.
  10. Assets, images, and icon widgets flutter.dev. Abgerufen am 10.01.2020.
  11. Definition - What does Macroblock mean? techopedia.com. Abgerufen am 10.01.2020.
  12. Flutter Engine engine.chinmaygarde.com. Abgerufen am 10.01.2020.
  13. Was ist eigentlich Flutter? coodoo.io. Abgerufen am 10.01.2020.
  14. Flutter entwickler.de. Abgerufen am 10.01.2020.


Weblinks