In diesem Artikel zeige ich wie man ein Raspberry Pi für Flutter einrichtet und wie ein Flutter Projekt auf diesem Device aussehen kann. Neben der Installation wird ein Dashboard mit Flutter entwickelt, welches dynamisch Daten anzeigt. Dieses Projekt ist auf GitHub verfügbar.
Zunächst können wir uns das Ergebnis direkt auf dem Pi anschauen und gehen dann Schritt für Schritt durch die Entwicklung solch einer App für ein Embedded Device.
Raspberry Pi vorbereiten und konfigurieren
Als erstes bereiten wir unseren Pi vor und installieren mit Hilfe des Raspberry Pi Imager Tools unser Basis Unix System. In meinem Fall ist es ein Ubuntu 22 Server System.
Im Anschluß müssen wir noch die "config.txt" auf dem PI Boot Image editieren.
Hier ändern wir folgende Zeilen:
dtoverlay=vc4-kms-v3d-pi4
/// HDMI Ausgabe angepassen
hdmi_group=2
hdmi_mode=87
hdmi_drive=1
display_rotate=0
hdmi_cvt 1024 600 60 6 0 0 0Diese Konfiguration wird benötigt, um später Weston als Desktop Umgebung auf unserem PI laufen zu lassen.
Wenn dies erledigt ist können wir den PI das erste mal starten und loggen uns anschließend auf dem Pi ein. Sinnvollerweise sollten wir noch unser W-Lan verbinden, so dass wir jetzt weitere Pakete installieren können.
Unter https://github.com/sony/flutter-elinux können wir auch die Doku finden, auf die wir uns im folgenden beziehen.
Als erstes müssen wir den Flutter eLinux Binaries installieren.
Dies können wir wie folgt machen:
$ git clone https://github.com/sony/flutter-elinux.git
$ sudo mv flutter-elinux /opt/
$ export PATH=$PATH:/opt/flutter-elinux/binIm Anschluß benötigen wir den Compiler und weitere Tools:
$ sudo apt install unzip curl clang cmake pkg-configZum Schluß müssen wir noch Weston installieren und können dann mit dem Ausführen unserer ersten Flutter Anwendung auf einem embedded Device starten:
$ sudo apt install weston
$ weston &Wenn wir das ausgeführt haben, sollten wir folgenden Screen sehen (der leer und clean aussieht):
Beispiel Projekt auschecken und starten
Der Raspberry Pi ist vorbereitet und nun möchten wir etwas auf dem Display sehen. Dazu habe ich mit Flutter ein Dashboard erstellt auf dem aktuelle News und Wetterdaten angezeigt werden. Neben UI-Elementen wird also auch eine API angesprochen.
Das Projekt "Flutter Embedded Dashboard" müssen wir von GitHub auschecken und anschließend bauen. Dazu von dem Weston Terminal aus ein neues leeres Verzeichnis anlegen, in das Verzeichnis navigieren und das GitHub Projekt auschecken.
Bevor wir das Projekt starten müssen wir noch API Keys für folgende Open API's besorgen:
Die Keys anschließend in dem News-Service und Weather-Service direkt im Code ersetzen. Das ist nicht der beste Stil aber für unsere Demo erst einmal völlig ok.
Nachdem wir die benötigten Keys in den Services hinterlegt haben, können wir das Projekt starten.
In das Projekt Verzeichnis navigieren und folgende Befehle ausführen:
$ make clean // Bauen aller Abhängikeiten
$ flutter-elinux build // Bauen der benötigten binariesWenn der Build abgeschloßen ist, können wir das gebaute Binary starten.
Um es zu starten, geben wir folgenden Befehl ein. Hierbei können wir mit den Parametern -w und -h die Breite und Höhe unseres Displays an den Runner übergeben.
$ ./sample -b .Das -b steht hier für das Bundle, welches wir angeben müssen.
Nun sollten wir folgenden Screen sehen:
Hier wird unsere Standard coodoo Architektur mit Generatoren genutzt. Wir setzten auf Riverpod, Freezed und Dio. Des Weiteren wollten wir ausprobieren, ob wir auch Rive als Animationsframework einsetzten können. Zwar gibt Rive selber an, dass es nicht auf Unix läuft, dennoch können wir im Hintergrund sehen, dass dort eine Rive Animation abläuft 🎉.
Auch in Sachen Performance läuft die Anwendung auf dem kleinem PI ohne Probleme mit wenig Speicherverbrauch.
Zusammenfassung
Mit einfachen Mitteln konnten wir schnell und einfach eine Embedded Anwendung erstellen. Auch können wir die Anwendung nicht nur auf einem Gerät nutzten, sondern könnten die gleiche Code Basis auf Mobilen Devices, Desktop und Web benutzten und so das volle Spektrum des Cross-Platform-Development ausnutzen. Die moderne und sichere Sprache Dart mit dem UI Framework Flutter ermöglicht schnelle und gut aussehende UI's umzusetzen, welche sich auch direkt der angeschloßenen Hardware bedienen. Mit dem Plugin und FFI (Foreign Function Interface) Konzept können wir jegliche Hardware direkt bedienen und somit variable Anwendungen für jeden Fall schreiben.
Das Nette ist: nebenbei kann die Anwendung auch für andere Plattformen direkt aus der gleichen Code Basis erstellt werden. Hier im Beispiel ist es MacOs und eine WebAnwendung:
Mit diesem Beispiel, einer Flutter Anwendung auf dem Raspberry Pi, Mac OS und Web beweist sich wieder worin die große Stärke von Flutter liegt: Eine Anwendung mit gleicher Code-Basis ohne Probleme und Mehraufwand auf diversen Plattformen ausspielen.
Das Code Beispiele für das Dashboard ist auf GitHub verfügbar: https://github.com/coodoo-io/flutter-embedded-dashboard
