2.6 KiB
\pagebreak
Implementierung der Features
Im Folgenden wird die Implementierung der einzelnen Features des Projektes beschrieben. Jedes Feature beschreibt einen Seitenbereich in der entwickelten Flutter Anwendung. Die Anwendung wurde so implementiert, dass alle Features falls nötig in einem Demo-Modus auch am Desktop-PC ausgeführt werden können. Alle Screenshots zeigen die Anwendung im Demo-Modus in Ausführung auf macOS.
Als Grundlage der Features dient der angepasste Scaffold HomeScaffold, dieser wird in der Konfiguration des Routers der App bei allen Features als Basis-Widget genutzt. Der HomeScaffold selbst ist noch einmal in zwei weitere angepasste Scaffold-Widgets unterteilt, AdaptiveScaffold und ScaffoldWithStatusbar.
Das AdaptiveScaffold stammt aus dem offiziellen Flutter packages Repository von den Flutter Entwicklern [@PackagesPackagesFlutter_adaptive_scaffold]. Es ermöglicht es, in dem Feld destinations einfach alle Navigationsziele, in diesem Fall die Features, zu definieren. In dem Feld onSelectedIndexChange wurde dann das Navigieren zu dem ausgewählten Feature mit dem GoRouter implementiert. Der AdaptiveScaffold passt sich dazu automatisch an die Displaygröße des Gerätes an und zeigt eine passende Navigationsleiste an, in welcher die definierten Navigationsziele angezeigt werden. Hierdurch wurde die Implementierung der Navigation zwischen den Features stark vereinfacht und die Navigation kann sehr leicht bearbeitet werden.
Das ScaffoldWithStatusBar Widget wurde selbst implementiert und es wird als Basis-Widget für den AdaptiveScaffold genutzt. Mit dem Widget wird eine Statusleiste am oberen Rand des Bildschirms angezeigt, in welcher die aktuelle Uhrzeit und der Status der WLAN-Verbindung angezeigt wird. Falls die Flutter Anwendung in dem Debug Modus läuft, wird zusätzlich der Text "DEBUG" links in der Statusleiste angezeigt. Der AdaptiveScaffold und die Statusleiste können in der Abbildung \ref{homeScreen} betrachtet werden. Wie die WLAN-Verbindung ausgelesen wird, wird in dem Kapitel \ref{headerSettingsFeature} beschrieben.
Home Feature
Das Home-Feature ist die Startseite der App. Es besteht aus einem einfachen Screen, der nur den Text "Flutter on Embedded Linux" anzeigt (siehe Abbildung \ref{homeScreen}).
\pagebreak
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \label{homeScreen} \centering \shadowimage[width=7cm]{./assets/screenshots/home.png} \end{figure}
\begin{figure}[H] \caption{Das Material Demo Feature} \label{material3} \centering \shadowimage[width=7cm]{./assets/screenshots/material3.png} \end{figure}
\end{multicols}