Modularisierung von Flutter Widgets

Wenn man sich länger mit Flutter beschäftigt und evtl. sogar mehrere Anwendungen nach Flutter portiert oder neu geschrieben hat, fällt einem schnell auf, dass sich Dinge immer wieder wiederholen.

Man baut immer den gleichen Login, man baut immer die gleiche View oder die gleiche Logik für seine Endpunkte.

Als Informatiker wissen wir, dass wir nicht immer wieder die gleichen Dinge tun sollten sondern vieles vereinfachen sollten bzw. auch generalisieren sollten um es uns einfacher zu machen und Fehler zu vermeiden.

Um in Flutter dies zu verhindern, können wir uns eigene Plugins / Packages bauen, mit denen wir diese Arbeit abstrahieren.

Wo unterscheiden sich Plugin und Package in Flutter:

Packages sind die einfachste Variante, welche nur Dart Code auslagert und diesen wieder benutzbar macht.

Plugins hingegen sind die komplexen Variante, welche mir erlauben neben dem eigentlichen Dart Code auch plattformspezifische Code auszulagern. Hier kann ich dann auch Native Views inkludieren oder mit dem System unten drunter kommunizieren.

https://docs.flutter.dev/development/packages-and-plugins/developing-packages

Wir werden uns im folgenden um das Plugin kümmern und mit einer Basis Version starten.

Diese wird zunächst nur Method Channels verwenden um mit dem System unten drunter zu kommunizieren.

Unser erstes Plugin

Als erstes generieren wir uns unseren App Code und legen uns parallel dazu unseren Plugin Code an.

Dies geschieht mit folgenden Befehlen:

flutter create --project-name basic_plugin --org de.coodoo --platforms android,ios .

Im Anschluss gehen wir einen Pfad tiefer und legen und einen Plugin Ordner an.

Hier benutzten wir folgenden Befehl:

 flutter create -t plugin --project-name basic . --platform android,ios

In unsere App pubspec.yaml müssen wir noch unser Plugin registrieren:

dependencies:
 flutter:
   sdk: flutter
 basic:
   path: ../plugin

Das Plugin generiert uns einige Dateien, welche wir direkt so nutzen können.

Im Plugin Lib folder gibt es die 3 Dateien

• basic.dart

• basic_platofrm_interface.dart

• basic_nethod_channel.dart

In der Datei Basic.dart wird unser Plugin Code geschrieben.

Das Interface dient nur zur Definition unsere Implementierung.

Die Basic_Method_Channel Datei dient dazu mit dem unterliegenden System über die bekannten Method Channels zu kommunizieren.

In den Ordner für Android und ios liegen jetzt unsere nativen Implementierungen der System Nachrichten.

Jetzt können wir unseren Plugin Code einfach in unsere App einführen und die Platform Version ausgeben:

Future<void> getPlatformVersion() async {
    platformVersion =
        await Basic().getPlatformVersion() ?? 'No Platform choosen';
    setState(() {});
  }

Bisher haben wir die Funktionalität der Method Channels ausgelagert.

Wir können aber auch mehr auslagern.

Wenn wir jetzt den Code zum Laden der Platform Informationen nicht in unsere App haben wollen kann diese auch einfach das passende Widget dazu zur Verfügung stellen.

Wir legen uns dazu ein passendes Widget Datei an und schreiben unser Stateful Widget.

Im Anschluss exportieren wir das Widget noch in unsere Basic.dart und können dies dann in unsere App nutzten.

Nun können wir einfach unseren Code unsere Widgets oder ähnliches auslagern und in unseren anderen Projekten wieder verwenden.

Next steps

Neben reinen Dart Packages kann man auch Native Plugins bauen, welche dann Native Views oder Zugriff auf die Hardware erlauben. Diese unterscheiden sich vor allem darin, dass diese aus nativen platform code bestehen. Auch hier wollen wir tiefer einsteigen und erklären wie das ganze funktioniert.