Flutter Use Case – Warum Flutter als Framework für mobile Apps?

Inhaltsverzeichnis

1. Warum Flutter?
2. Was ist Flutter?
3. Aus der Sicht eines Entwicklers
4. Was wir kreiert haben
5. Abschließende Gedanken zur Entwicklung einer App in Flutter
6. Zusammenfassung

Was ist Flutter? Warum war die Entwicklung mit Flutter perfekt für unser Projekt? Was haben wir erreicht? Wenn Sie diesen Artikel gelesen haben, kennen Sie die Antworten auf diese Fragen. Und wenn es Ihr Interesse weckt, haben Sie vielleicht selbst eigene Fragen, welche wir Ihnen sehr gerne beantworten.

In Zeiten der COVID-19-Pandemie gibt es viele Einschränkungen für Tagungen und Veranstaltungen. Das Ausmaß dieser kann sich jedoch bereits innerhalb von zwei Wochen ändern und Unternehmen, die sich auf die Veranstaltungsorganisation spezialisiert haben, haben es nicht leicht. Auch die Tagesordnung ihrer Sitzungen kann dynamischen Änderungen unterliegen.

Unser Kunde ist Organisator eines dieser „Offline-Meetings“ und bis zur vorherigen Ausgabe wurde die Agenda für seine Veranstaltung auf Papier verteilt. In diesem Jahr musste der Kunde aufgrund der derzeit geltenden Einschränkungen und neuen Gesetze in die digitale Welt wechseln. Unsere Aufgabe bestand darin, eine App zu erstellen, mit der Endbenutzer den aktuellen Veranstaltungsplan einsehen und eine Liste mit Themen erstellen können, die sie interessieren.

Warum Flutter?

• Flutter macht Spaß.
• Dieselbe großartige UI & BL auf Android- und iOS-Plattformen.
• Leistung ähnlich wie bei nativen Apps.
• Deadline – weniger als 1,5 Monate für das Projekt (Time-to-Market).
• Unterstützung durch die Flutter-Community.
• Bibliotheken & Plugins für die Hardwareintegration.

Was ist Flutter?

Flutter ist ein Framework, das seit 2018 immer beliebter wird. Auf der Google I/O Conference wurde bekannt gegeben, dass 1 von 8 neuen Apps (12,5 %) die im Google Play Store veröffentlicht werden, mit Flutter geschrieben wurden. Flutter ist ein weiteres „hybrides“ Framework. Die Hauptidee besteht darin, einen Code für Android & iOS in Dart zu schreiben und zu einer nativen App zu kompilieren. Warum haben wir uns entschieden, Phonegap, Xamarin oder React Native nicht zu verwenden? Dart ist Java ähnlich (für lange Zeit war Java die Hauptsprache auf der Android-Plattform). Flutter wurde mit C, C++, Dart und Skia (einer 2D-Rendering-Engine) erstellt. Die Engine funktioniert ähnlich wie Game-Engines. Eine ausführliche Beschreibung mit Antworten auf häufig gestellte Fragen finden Sie in diesem Artikel.

Abbildung I: Vergleich der Suchtrends für den nicht-nativen mobilen Ansatz (Keywords) in der Google-Suche von Jan 2018 bis Sept 2020

Eine Zusammenfassung von Flutter:

• Ist ein SDK für Android und iOS.
• Bietet einen Widget-Ansatz zum Erstellen von Apps.
• Bietet Tools für Hot-Reload und Entwicklung (Debugging, View-Hierarchie).
• Wird von Google entwickelt und unterstützt.
• Verfügt über eine große Community-Unterstützung.

Aus der Sicht eines Entwicklers

Welchen Technologie-Stack (Tools & Bibliotheken) haben wir verwendet?

Wir sind Fans des Resocoder-Ansatzes für die Flutter-Architektur:

 

• Bloc - eine Trennung zwischen Präsentations- und Geschäftslogik mit einfacher Kommunikation über Zustände und Ereignisse.
• Freezed - macht eine Klasse unveränderlich.
• Either - Erfolg oder Fehler aus Anwendungsfällen zurückgeben.
• Dio - eine Netzwerkanfrage.
• Moor - eine lokale Datenbank.
• get_it - di.

Folgendes haben wir geplant, mit einer kleinen Ergänzung – Anwendungsfälle (einzelne Aktionen, die durchgeführt werden sollten, zum Beispiel: Aus dem Repository lesen) in Blocs:

 

Abbildung II: Quelle: https://resocoder.com/2020/03/09/flutter-firebase-ddd-course-1-domain-driven-design-principles/

 

Sieht es nicht gut aus? Sicherlich tut es das. Es gab nur einen Schwachpunkt – der Kunde hatte keine API (was bedeutete, dass es keine Updates zur aktuellen Agenda geben würde). Der Kunde hatte jedoch eine alte Webseite, die Daten aus der Datenbank anzeigte, also vereinbarten wir, dass die Ereignisdaten in Form von JSON-Dateien für uns gehostet werden und der Speicherort der Dateien sich ändern könnte… also die URLs für sie fest in der App kodieren sollte keine Option sein.

Wie sind wir mit dieser Anforderung umgegangen? Wir haben eine Konfigurationsdatei erstellt, die von der App heruntergeladen wird (beim ersten Lauf), bei einem anderen Lauf prüft die App, ob es eine neue Version davon gibt. Die Datei enthält alle notwendigen Informationen, die für die nächste Veranstaltung ohne Aktualisierung der Anwendung geändert werden könnten.

Was wir kreiert haben

 

Abschließende Gedanken zur Entwicklung einer App in Flutter

• Überlegen Sie, ob Sie eine Bibliothek für eine bestimmte Aufgabe benötigen. Bibliotheken sind wirklich hilfreich, aber Sie müssen sie später pflegen – und größere Änderungen an der Bibliothek können sich auf Ihre App auswirken.
• Werfen Sie einen Blick auf Flutter-bezogene Webseiten und Kurse, bevor Sie mit der Entwicklung beginnen. Der Ansatz „Alles ist ein Widget“ könnte am Anfang schwer zu verstehen sein.
• Wenn Sie können, verwenden Sie flexible Widgets. Unterschiedliche Geräte haben unterschiedliche Bildschirmtypen und diese Widgets helfen dabei, die App an unterschiedliche Bildschirmauflösungen anzupassen.
• Widget-Methode vs. einer neuen Widget-Class - Erstellen Sie nach Möglichkeit mehr Widget-Class als Methoden, die Widgets zurückgeben. Dies hängt mit dem Bildschirm-Rendering und der Interaktion mit Benutzern zusammen.
• Der meiste Code könnte auf einer Plattform vollständig getestet und auf einer anderen ein Smoke-Testing getan werden. Ausnahmen beziehen sich auf das Hardware-Handling oder die Interaktion mit dem Betriebssystem (E-Mail senden, anrufen usw.)
• Fügen Sie abschließende Kommas am Ende hinzu – es hilft bei der Codeformatierung.
• Verwenden Sie nach Möglichkeit das Schlüsselwort const für ein Widget, das den Status nicht ändern muss.
• Bloc als Architekturmuster mit Anwendungsfällen wird die Arbeit erledigen. Ein Widget kann bei Bedarf mehr als einen Bloc haben – verwenden Sie den MultiBlocProvider für eine bessere Trennung.
• Der Widget-Ansatz zum Erstellen einer mobilen App ist im Vergleich zur standardmäßigen nativen Entwicklung interessanter.
• Flutter muss noch an einem besseren Feedback für Entwickler zu den Problemen im Code arbeiten.

Zusammenfassung

Das Projekt war ein Erfolg – ​​dank des Einsatzes von Flutter waren wir vor Ablauf der Frist fertig. Mit einem dynamischen Ansatz für Widgets konnten wir die Benutzeroberfläche in Demo-Sitzungen mithilfe der Hot-Reload-Funktion aktualisieren, um die Anforderungen des Product Owners zu erfüllen. Das Schreiben von Code in Dart ähnelt Java und Flutter eröffnet einem Entwickler viele Möglichkeiten, UX-freundliche mobile Apps zu erstellen. Bei kleinen Apps müssen Entwickler keinen nativen Hintergrund haben, aber bei größeren oder bei der Verwendung von Hardware sollten Entwickler wissen, was unter der Haube passiert. Wenn Sie einen PoC erstellen möchten, verwenden Sie Flutter. Wenn Sie ein kleines Projekt ausführen müssen, verwenden Sie Flutter. Sie suchen ein großes Projekt? Warum nicht Flutter verwenden? Denken Sie daran, dass Flutter expandieren wird… also können Sie Flutter in Zukunft möglicherweise nicht nur für die mobile Entwicklung verwenden.

Und ja, unsere App wurde vom Kunden positiv aufgenommen und die Offline-Veranstaltung wurde in die Online-Zone verschoben. Wir drücken schon jetzt die Daumen für die nächste Ausgabe der Veranstaltung.