Flutter

20.10.2019 | DaniD

Alles Apps

Apps für mobile Endgeräte sind mittlerweile ein integraler Bestandteil unseres digitalen Lebens geworden. Auch wenn die anfängliche Euphorie und Goldgräberstimmung bei der App-Entwicklung mittlerweile zurückgegangen ist, ist es mittlerweile fast schon eine Selbstverständlichkeit mobile Apps im Portfolio zu haben.

Dabei muss die App selbst nicht zwangsläufig das zentrale Produkt darstellen. Oft dienen Apps als einer der wichtigsten Zugangspunkte zu einer Plattform, werden komplementär zu anderen Hard- und Software-basierten Produkten angeboten oder dienen als Medium zur Informationsdarstellung.

Die Anzahl der Plattformen für mobile Endgeräte hat sich in den letzten Jahren stark auf hauptsächlich zwei Anbieter destilliert. Mit einem Marktanteil von 74,5% (Stand Januar 2019) ist Android derzeit weltweit das am meisten verwendete mobile Betriebssystem gefolgt von iOS mit 22,85%. Es gehört allerdings zum guten Ton eine App mindestens für beide Hauptplattformen anzubieten. Für die App-Entwicklung bedeutet dies zwar eine Reduktion des Aufwands im Hinblick auf die Anzahl der Plattformen, dennoch gilt es zwei Codebasen zu bewirtschaften.

Diese Problem adressieren aktuell einige Lösungsansätze, wie beispielsweise “Responsive Web Applications”, “Progressive Web Applications” oder “Hybrid Applications”. Wer allerdings native Apps entwickeln möchte, bekommt mit Flutter (flutter.io) seit Dezember 2018 ein Development Kit geboten, welches verspricht aus derselben Codebasis Apps sowohl für Android wie auch für iOS zu erzeugen. Aktuell steht Flutter in der Version 1.9.1 zum Download bereit.

Eine Codebasis für alles

Flutter-Apps werden in Dart (dart.dev) geschrieben, einer Client-optimierten Programmiersprache. In vielen Bereichen ähnelt es Mainstream-Programmiersprachen wie Java und C# stark, so dass sich viele Entwickler schnell damit zurechtfinden. Aus dieser intermediate Language kann Flutter sowohl native iOS- und Android als auch Web- und Desktopapplikationen erzeugen. Interpretiert wird der Dart-Code von der DartVM, die für verschiedene Betriebssysteme verfügbar ist.

Responsive image

Flutter macht alles selber

Eine herausragende Eigenschaft von Flutter ist, dass sämtliche UI-Elemente vom Framework selbst gerendert werden. Es werden also nicht die visuellen Komponenten verwendet, die die jeweiligen Plattformen bereitstellen, sondern Flutter kontrolliert jeden Pixel des Bildschirms. Damit lassen sich alle visuellen Bestandteile uneingeschränkt modifizieren ohne auf die Beschränkungen der nativen Elemente eingehen zu müssen. Eine Prämisse, die Flutter damit verfolgt ist, den Bildschirm mit mindestens 60 Frames per Second zu aktualisieren. Damit soll ein besonders flüssiges Benutzererlebnis geboten werden können. Es stehen sowohl Material Design- als auch iOS-Stylings zur Verfügung, die je nach Bedarf eingesetzt werden können.

Alles ist ein Widget

Beim Aufbau des Element-Baumes (vergleichbar mit dem DOM bei Webseiten) gilt konsequent die Regel: Alles ist ein Widget. Um dies zu erreichen steht eine grosse Auswahl an darstellenden und strukturellen Widgets bereit, die in der Regel grosszügig modifiziert werden können. Dieser exzessive Gebrauch von Widget hat zwar zur Folge, dass je nach App ein sehr verschachtelter und tiefer Element-Baum entstehen kann. Web-Entwickler dürften hier Parallelen zur Web-Welt mit geschachtelten DIV-Elementen oder ähnlichem erkennen. Wer den Widget-Gedanken aber beherzigt, zerteilt einen zu grossen Element-Baum in kleine und handliche Komponenten. Aktuell existiert noch kein visueller Editor, der die Gestaltung des UIs per Maus ermöglicht.

Alles ganz einfach - das Setup für die Entwicklung

Für die Entwicklung einer Flutter-App ist nicht viel notwendig. Das Flutter-SDK wird einfach in einen Ordner entpackt und die PATH-Variable mit einem Eintrag auf das bin-Verzeichnis erweitert. Ein Aufruf von “flutter doctor” in der Kommandozeile bzw. Terminal offenbart noch etwaige Stellen, an denen Handlungsbedarf besteht. Als IDE eignet sich beispielsweise Android-Studio, dass auf IntelliJ basiert, oder auch Visual Studio Code mit entsprechenden Plug-Ins für Dart und Flutter. Wie bei der nativen Entwicklung auch, stehen beim Coding mit Flutter diverse Simulatoren zur Verfügung, in welchen der Code direkt ausgeführt werden.

Alles wie gewohnt - das Deployment

Auch für Flutter gilt: wer iOS-Apps bauen und publizieren möchte, benötigt zwingend einen Mac mit installiertem XCode. Wie gewohnt, ist für das Publishing der Apps sowohl für iOS, als auch für Android, ein Entwickler-Account nötig. Das Ausführen der Anwendung auf einem lokalen Gerät ist allerdings auch ohne kostenpflichtigen Account möglich.

Fazit und Learnings

Die Entwicklung von nativen Apps mit Flutter hat mir persönlich sehr gefallen. Zuvor hatte ich schon einige kleinere Apps für Android und iOS entwickelt, tat mich anfangs aber etwas schwer damit. Vielleicht ist es die Nähe zur Webentwicklung, die mir den Einstieg in Flutter erleichterte, wie beispielsweise das Nesting von Widgets oder die Nutzung von Futures (vergleichbar Promises). Auch die gute Integration in die IDEs erleichtern den Start und vermitteln einen gut durchdachtes Gesamtpaket. Bei der Entwicklung fällt schnell auf, dass durch die Verschachtelung eine Flut von geschweiften und runden Klammern das Lesen des Codes erschweren. Wie bereits erwähnt hilft es hierbei die Komponenten sinnvoll zu zerlegen und die Code-Formatierungsfunktionen der eingesetzten IDE zu verwenden. Ein besonderes Feature, welches mir sehr gut gefallen hat war, dass Änderungen am Code sich in den meisten Fällen per Hot-Reload unmittelbar im Simulator wiederfanden. Das machte das Überprüfen von kleinen Codeänderung sehr angenehm. Insgesamt kam ich mit Flutter schnell zu vorzeigbaren Ergebnissen. Und auch für zukünftige Projekte im App-Umfeld möchte ich Flutter wo möglich einsetzen und verfolge gespannt dessen weitere Entwicklung.