Flutter und Dart im Einsatz für Apps – ein Erfahrungsbericht

Wie im Blogpost „Mobile App-Entwicklung mit Google Flutter“ berichtet haben wir uns bei der Umsetzung eines aktuellen Kundenprojekts für das Framework Flutter entschieden. In diesem Blogpost möchte ich einen kurzen Einblick in die ersten Erfahrungen, Vorzüge und Hürden mit Flutter teilen.

Ein kurzer Hintergrund

Bei der App handelt es sich um die digitale Umsetzung eines Produktkatalogs. Die Produktdaten liegen bereits in einem von exensio implementierten Backend vor, sodass wir diese über eine REST-Schnittstelle der App zur Verfügung stellen können. Funktional sind ein Login, umfassende Suchmöglichkeiten und eine Detailansicht der Ergebnisse umgesetzt. Zudem können Produktbilder und zugehörige PDFs abgerufen, in der App angesehen sowie mittels der Plattform eigenen Funktionen geteilt werden.

Vorzüge

Der Einstieg in Flutter erweist sich dank umfassender Dokumentation und diversen Video-Tutorials, sowohl offiziell als auch durch die Community erstellt, als relativ einfach. So können vergleichsweise schnell erste Ergebnisse erzielt werden. Auch die zugrundeliegende Programmiersprache Dart fühlt sich mit Vorkenntnissen in Java oder JavaScript direkt vertraut an. Dart wird, ebenso wie Flutter, von Google entwickelt und ist für das Zeichnen von Nutzerschnittstellen auf diversen Plattformen optimiert. Während der Entwicklung ist es dank „just in time“ (JIT) Kompilierung der Dart-VM möglich, Änderungen am Programmcode direkt im Emulator oder auf den Geräten darzustellen, sodass schnell am Design iteriert werden kann. Wer Hot-Reload aus der Webentwicklung kennt, wird dieses Feature nicht mehr missen wollen. Für die Auslieferung wird der Code dann „ahead of time“ (AOT) für die Zielplattformen optimiert, sodass die Apps weniger Platz auf den Endgeräten einnehmen. Darüber hinaus bieten Dart und Flutter weitere Annehmlichkeiten, die die Entwicklung vereinfachen und beschleunigen. So bieten die DevTools, welche selbst komplett in Flutter geschrieben sind, umfangreiche Möglichkeiten, die eigene App auf Herz und Nieren zu prüfen, unabhängig von der gewählten Entwicklungsumgebung. Sollte doch ein Fehler auftreten bietet Dart in den meisten Fällen eine sehr umfangreichen Fehlerbeschreibung, mit der das Problem schnell eingegrenzt und gelöst werden kann.

Dass Flutter ermöglicht, mit einer Code-Basis Apps für Android und iOS (und mehr) zu erstellen, ist inzwischen klar. Was kann man sich aber darunter vorstellen? Flutter baut die UI mittels sogenannter Widgets auf. Darunter kann man sich Bausteine wie Listen, Buttons oder ganze Appbars vorstellen, die nahezu beliebig miteinander kombinierbar sind, um das gewünschte Ergebnis zu erzielen. Diese kommen vorgefertigt sowohl in Material- als auch Cupertino-Design. Neben dem Aussehen übernimmt Flutter aber auch direkt das korrekte Verhalten der UI und Animationen der Zielplattform. So bekommt die gleiche Liste auf iOS den auf der Plattform bekannten Gummiband-Effekt und erhält auf Android den typischen Indikator für das Ende der Liste, ohne dass man als Entwickler zusätzlich etwas dafür tun muss – das spart Zeit und Geld. Auch die Navigation, welche „out of the Box“ mit Flutter kommt, passt die Bildschirmübergänge ohne Mehraufwand dem Endgerät an.

Ein weiterer Pluspunkt ist das robuste Theming, welches sich durch die vorgefertigten Widgets zieht. Damit können zentral Farben, Schriften, Abstände und mehr gesteuert werden, um die App an das gewünschte Branding anzupassen. Dabei ist man nicht auf ein Theme beschränkt, sondern kann durchaus mehrere definieren und dynamisch zur Laufzeit austauschen. Dies ist zum Beispiel besonders interessant, wenn Produkte verschiedener Hersteller in derselben App vorkommen und so entsprechend individualisiert werden können, ohne aus dem übergreifenden App-Design zu fallen.

Flutter greift für die Darstellung von Widgets nicht auf die Plattform eigenen Elemente zurück, sondern zeichnet alles selbst. Dies kann als erster Malus angesehen werden, da man auf ein Update durch das Flutter-Team angewiesen ist, sollten sich das Aussehen der Elemente auf der Zielplattform ändern und man auf die vorgefertigten Widgets setzt. Auf der anderen Seite bietet dieser Ansatz aber die Freiheit, genau die Userexperience umzusetzen, die für das Produkt gewünscht ist und die eigene Marke über mehrere Plattformen hinweg konsistent zu präsentieren. Dank des Open-Source Ansatzes von Flutter ist es zudem möglich, vorhandene Elemente abzuändern oder ganz neue zu erstellen. Solche Erweiterungen können als Plugins der Community zur Verfügung gestellt werden und umgekehrt können diese auch ins eigene Projekt importiert werden, wenn eine Funktionalität noch nicht vorhanden ist. Damit kommen wir zu den kleinen Hürden, die bisher bei der Verwendung von Flutter aufgefallen sind.

Herausforderungen

Wie bereits angedeutet kann es vorkommen, dass man eine Funktionalität benötigt, welche nicht durch das Framework selbst abgedeckt wird. In unserem Fall trifft das auf das Sharing von Dateien zu. Zu Beginn des Projekts erlaubte Flutter zwar das Sharen von Texten, aber nicht von Dateien. Glücklicherweise existieren hierzu durch die Community erstellte Erweiterungen, die Abhilfe schaffen. Wenn man sich solche Plugins aber ins Projekt holt, muss man sich aber darüber im Klaren sein, dass diese meist durch Privatpersonen bereitgestellt werden. Diese können nicht zwingend auf jeden Fehler eingehen oder diesen zeitnah beheben, sodass man im Zweifel selbst Hand anlegen muss. Zudem steigt die Anzahl der von Flutter unterstützten Plattformen stetig an und jedes Plugin muss diese auch entsprechend unterstützen. Seit Ende August unterstützt das Flutter eigene Share Plugin nun auch Dateien, sodass die Community erstellte Version nun überflüssig und die Entwicklung daran eingestellt ist. Damit verbunden ist ein Wechsel des Plugins im Projekt und erneutes Testen. Diese Probleme sind nicht unbedingt Framework-spezifisch, da Flutter und die darunter liegende Sprache Dart noch relativ jung sind, können solche Gegebenheiten vergleichsweise häufiger aufkommen. Die Entwicklung durch Google schreitet aber schnell voran, sodass sie in der Zukunft immer weniger ein Problem darstellen sollten.

Ein zweiter Punkt ist die voranschreitende Unterstützung von Zielplattformen. Neben Android und iOS wird Web inzwischen im Beta-Stadium unterstützt sowie Desktop in Alpha. Das ist für sich genommen großartig und erlaubt in Zukunft die Verteilung der gleich Code-Basis auf nahezu allen Geräten. Die Wahl der Endgeräte sollte aber zu Beginn eines Projekts klar definiert sein, da ein für mobile Geräte optimiertes UI nicht unbedingt auch auf dem Desktop funktioniert. Dank Unterstützung für Media-Queries ist eine solche Unterscheidung und Anpassung für verschiedene Displaygrößen durchaus möglich, sollte aber von Anfang an beachtet werden, da eine späte Erweiterung ggf. deutlichen Mehraufwand mit sich bringt.

Fazit

Flutter ist ein spannendes, zukunftsträchtiges Framework, welches dank einfachem Einstieg schnelle Ergebnisse liefert. Gleichzeitig bietet es die Freiheit, dank voller Kontrolle über die gezeichneten Pixel auch komplexe UIs und Animationen umzusetzen, sodass auch aufwendige Kundenwünsche durchaus umsetzbar werden. Komplexe 2D Animationen können z.B. mittels Rive (dessen neueste Version komplett in Flutter for Web implementiert ist) umgesetzt und mittels kostenlosem Plugin in Flutter angezeigt und gesteuert werden.

Da sowohl Flutter als auch Dart durch Google entwickelt werden, sind diese gezielt aufeinander abgestimmt und die Entwicklung schreitet schnell voran. Wie bereits erwähnt wird neben mobilen Plattformen (iOS/iPadOS und Android) auch Web (in Beta) und Desktop (in Alpha) unterstützt. Zudem soll Flutter für Googles anstehendes Betriebssystem Fuchsia eine der Hauptmethoden zum Erstellen von Apps sein. Damit scheint die Zukunft von Flutter sehr sicher und Apps, die bereits jetzt auf Flutter setzen, haben eine gute Aussicht auf Kompatibilität über quasi sämtliche Endgeräte hinweg.  

Flutter Reihe:

• Teil 1: Mobile App-Entwicklung mit Google Flutter
• Teil 2: Flutter und Dart im Einsatz für Apps – ein Erfahrungsbericht
• Teil 3: Animationen mit Flutter - das exensio Logo als Ladeanimation
• Teil 4: Flutter for Web mittels Google Cloud Bucket veröffentlichen
• Teil 5: Wie erstellt man Packages mit Google Flutter
• Teil 6: Barcodes Scannen mit Google Flutter
• Teil 7: Wie eine Google Flutter App sprechen lernt
• Teil 8: Flutter meets Video
• Teil 9: Flutter und schimmernde Skelette
• Teil 10: Flutter Design Series: Glas Morphismus
• Teil 11: App State-Management mit Flutter BLoC
• Teil 12: Mit Quick Actions Schnellzugriffe in Flutter Apps umsetzen
• Teil 13: Listen in Listen: Flutter Performance Optimierung