67 lines
2.6 KiB
Markdown
67 lines
2.6 KiB
Markdown
|
\pagebreak
|
||
|
|
|
||
|
|
# Implementierung der Features {#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}
|