Flutter: schöne und schnelle Apps für Android und iOS

Die Flutter Entwicklung verspricht wunderschöne Apps. Diese sind zudem noch extrem schnell. Wir wollten uns davon selbst überzeugen. Als Test haben wir unsere erste Flutter App geschrieben. In diesem Beitrag fassen wir zusammen was uns dabei aufgefallen ist.

Flutter: Alternative zur nativen Entwicklung

Jahrelang wurden Apps nativ entwickelt. Es gab kaum Alternativen. Dabei nutzte man die offiziellen Schnittstellen und Werkzeuge von Android und iOS. Der Entwickler erhält so die volle Kontrolle über das System. Das Resultat sind qualitativ hochwertige Apps mit hoher Performance. Wer Apps für mehr als eine Plattform entwickeln will, muss weiterhin Kompromisse eingehen.

Die getrennte Entwicklung ist zeit- und kostenintensiv. Pro Plattform ist ein eigener Entwickler notwendig. In den letzten Jahren haben viele Unternehmen versucht diesen Umstand zu ändern. Unter anderem entwickelte Facebook React Native oder Microsoft Xamarin. Das Versprechen dieser Frameworks ist ähnlich: Eine Codebasis für alle Systeme. Mittlerweile ist auch Google mit Flutter in dieses Rennen eingestiegen.

Was ist Flutter überhaupt?

Flutter wird seit 2015 von Google entwickelt. Damit lassen sich schnell Mobile Apps für Android und iOS entwickeln. Das Framework ist Open Source. Flutter ist zudem die Basis für Fuchsia. Fuchsia ist das neue Betriebssystem von Google. Es soll in Zukunft Android ablösen. Mittlerweile laufen Apps von Alibaba, Groupon, Tencent und natürlich Google selbst mit Flutter. Viele dieser Apps werden von Millionen Benutzern tagtäglich verwendet.

Zudem hat sich eine große Community rund um das Projekt gebildet. Auch das ÖKO-System rund um das Framework wächst ständig. Dadurch werden täglich neue Plugins oder Services veröffentlicht. Es gibt eine Reihe an fertigen Integration für unterschiedliche Cloud Services. Vor allem mit Googles internen Service Firebase interagiert Flutter hervorragend. Anbieter wie zum Beispiel Codemagic bieten Continous Integration und Deployment speziell für Flutter Apps.

Die Programmiersprache im Hintergrund ist Dart. Dart wird ebenfalls von Google entwickelt. Die Sprache ist eine Mischung aus C# und Java. Google hat aus den verschiedenen Sprachen die wichtigsten Prinzipien kombiniert. Bringt man also Erfahrung aus diesen Bereichen mit, fällt der Einstieg leichter.

Die Methodik erinnert stark an die reaktive Programmierung. Normalerweise finden sich dadurch auch Webentwickler schnell zu Recht. Zusätzlich ist die Dokumentation für Dart und Flutter sehr gelungen. Der hauseigene Youtube-Channel rundet dieses Erlebnis ab. Dort findet man nahezu täglich Tutorials.

Cross Plattform Entwicklung für Android, iOS und Co

Die Entwicklung mit Flutter ist für unterschiedliche Plattformen geeignet. Im Fokus stehen dabei natürlich Android und iOS. Apps sind in sogenannte Widgets unterteilt. Diese sind vergleichbar mit den Komponenten und Services aus React Native oder Ionic. In Flutter ist jedes Element ein Widget. Egal ob Button, Suchfeld oder die gesamte App. Die Logik und der Datenfluss sind mit einer Baumstruktur vergleichbar. Änderungen oder Ereignisse werden an die Kinderelemente weitergeleitet.

Out of the box bietet Flutter eine Reihe an vorgefertigten Widgets. Zudem ist die Integration von Googles Material Design hervorragend. Das Cupertino-Package bietet darüberhinaus iOS-spezifische Elemente und Styles. Es bedarf anfangs etwas Einarbeitungszeit. Gerade zu Beginn ist die Wahl des richtigen Widgets nicht einfach.

Hat man aber erstmal einen Überblick und versteht die einzelnen Anwendungsfälle, scheinen die Möglichkeiten unendlich. Das Tolle an dem Framework ist nämlich, dass man relativ einfach eigene Widgets erstellen kann. Bestehenden Widget können beliebig kombiniert werden um so neue Widgets zu kreieren.

Hohe Performance durch Rendering-Engine

Im Gegensatz React Native oder Xamarin verwendet das Framework nicht die nativen UI-Komponenten. Flutter zeichnet die Inhalte direkt auf den Bildschirm. Dieser Ansatz ähnelt einer Gaming-Engine. Das Flutter Team hat alle wichtigen Komponenten detailgetreu nachgebaut. Als normaler User erkennt man kaum einen Unterschied. Das bringt einen wichtigen Vorteil im Vergleich zu Konkurrenz. Die Performance ist hervorragend und Animationen laufen extrem flüssig ab.

Flutter Entwicklung mit Hot Reload

Während der Entwicklung haben wir vor allem ein Feature lieben gelernt. Flutter unterstützt ähnlich wie React Native das Hot Reloading. Möchte ein Android- oder iOS-Entwickler im Moment die Größe eines Textes ändern, muss dafür ein neuer Build angestoßen werden. Das kostet Zeit und Nerven. Je nach Größe der Anwendung kann das sogar mehrere Minuten dauern. Durch den Hot Reload werden Änderungen direkt am Gerät sichtbar. Ändert man beispielsweise die Farbe eines Elements, wird dieses direkt neugezeichnet. Der Build einer App wird dadurch enorm beschleunigt. Verschiedene Designs können so in kürzester Zeit getestet werden.

Die Schwächen von Flutter

Natürlich ist noch nicht alles Gold was glänzt. Bei der Entwicklung einer unserer Apps kämpften wir auch mit Problemen. Auf iOS gab es immer wieder Probleme mit dem Update unterschiedlicher Plugins. Flutter befindet sich noch in einem sehr frühen Stadium. Es werden laufend Updates veröffentlicht.

Es empfiehlt sich deshalb die Plugins in der Konfiguration auf eine fixe Version zu setzen. Flutter aktualisiert diese sonst automatisch. Das führt sehr schnell zu Kompatibilitätsproblemen. In manchen Fällen hilft nur mehr ein manueller Downgrade auf eine ältere Version.

Nichtsdestotrotz hat uns die Entwicklung mit Flutter sehr viel Spaß gemacht. Im Vergleich zu bisherigen Lösungen ist vor allem die Performance hervorzuheben. Zusätzlich hat uns die Hot Reload Funktion begeistert. Das Schreiben einer App fühlt sich dadurch her wie Entwickeln im Web an. Änderungen werden direkt am Smartphone sichtbar. Alles geht einfach etwas schneller von der Hand.

Google hält auch das Versprechen „Design beautiful apps“. Die Einarbeitung kostet etwas Zeit. Sobald man den richtigen Einsatz der UI-Elemente versteht, kann man sich am Design der App austoben.

Zukunft: Flutter für das Web

Auch die Zukunft von Flutter stimmt uns positiv. Auf der Roadmap stehen einerseits technische Optimierungen. Andererseits will das Team weitere Plattformen unterstützen. Dart transpiliert sehr gut zu JavaScript Code. Die ideale Grundlage für Web Apps.

Das Projekt Hummingbird soll Flutter deshalb fit für den Browser machen. Der Desktop soll ebenfalls erobert werden. Erste Experimente auf MacOS und Windows sowie auf Raspberry Pi Geräten waren ein Erfolg. Wir dürfen also gespannt sein, ob sich Flutter in der Cross Plattform Entwicklung durchsetzt.