13 KiB
Implementierung der Features
Im Folgenden wird die Implementierung der einzelnen Features des Projektes beschrieben.
\pagebreak
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.
\Begin{multicols}{2}
\begin{figure}[H] \caption{Ordnerstruktur des Home-Features} \centering \begin{minipage}{7cm} \dirtree{% .1 home/. .2 presentation/. .3 home\char`_screen.dart. } \end{minipage} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/home.png}} \label{fig:screeplot} \end{figure}
\End{multicols}
\pagebreak
Material Demo Feature
Das Material Demo Feature zeigt eine Auswahl von Material Design Widgets. Es besteht aus einem Screen, der eine Liste von Widgets anzeigt.
\Begin{multicols}{2}
\begin{figure}[H]
\caption{Ordnerstruktur des Material Demo Features}
\centering
\begin{minipage}{10cm}
\dirtree{%
.1 material\char\_demo/. .2 presentation/. .3 material\char_demo\char\_screen.dart. .3 widgets/. .4 component\char_decoration.dart.
}
\end{minipage}
\end{figure}
\begin{figure}[H] \caption{Material Demo Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/material3.png}} \label{fig:screeplot} \end{figure}
\End{multicols}
\pagebreak
Benchmark
Das Benchmark Feature zeigt verschiedene Benchmarks, die die Leistungsfähigkeit von Flutter auf Embedded Linux demonstrieren.
\begin{figure}[h]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 benchmark/.
.2 business/.
.3 flame/.
.4 rogue\char\_shooter/. .4 sprite\char_renderer/.
.2 data/.
.3 models/.
.4 benchmark.dart.
.4 ember.dart.
.3 benchmarks\char\_list.dart. .2 presentation/. .3 widgets/. .4 benchmark\char_card.dart.
.3 benchmark\char\_screen.dart. .3 map\char_benchmark\char\_screen.dart. .3 rogue\char_shooter\char\_screen.dart. .3 sprite\char_benchmark\char\_screen.dart. .3 video\char_benchmark\char\_screen.dart. .3 vsync\char_benchmark\char`_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/benchmark.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/benchmarkSprite.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\pagebreak
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/benchmarkSpriteFinished.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/benchmarkFlame.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/benchmarkFlame2.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/benchmarkVsync.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/benchmarkVideo.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/benchmarkMap.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\pagebreak
News
Das News Feature zeigt eine Liste von Nachrichten der Tagesschau.
\Begin{multicols}{2}
\begin{figure}[H]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 news\char\_api/. .2 business/. .3 news\char_controller.dart.
.3 scroll\char\_state\char_controller.dart.
.2 data/.
.3 models/.
.4 news.dart.
.4 region\char\_news.dart. .4 teaser\char_image\char\_url.dart. .4 teaser\char_image.dart.
.3 repository/.
.4 news\char\_repository.dart. .2 presentation/. .3 widgets/. .4 news\char_grid\char\_item.dart. .4 news\char_grid.dart.
.4 news\char\_list\char_item.dart.
.4 news\char\_list.dart. .3 news\char_screen.dart.
}
\end{minipage}
\end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/newsList.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/newsGrid.png}} \label{fig:screeplot} \end{figure}
\End{multicols}
\pagebreak
Freezed
wurde verwendet, um die Modelle zu generieren.
\lstinputlisting[language=Java, caption=Implementierung der News Klasse, linerange={0-20}, captionpos=t] {code/flutter_elinux/lib/features/news_api/data/models/news.dart}
\lstinputlisting[language=Java, caption=Implementierung des News Controllers, captionpos=t] {code/flutter_elinux/lib/features/news_api/data/repository/news_repository.dart}
\lstinputlisting[language=Java, caption=Implementierung des News Controllers, captionpos=t] {code/flutter_elinux/lib/features/news_api/business/news_controller.dart}
\pagebreak
Led Morse
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 morse\char\_led/. .2 business/. .3 service/. .4 morse\char_service.dart.
.2 presentation/.
.3 led\char`_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/morse.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/morseInput.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\lstinputlisting[language=Java, caption=Implementierung des Morse Service, captionpos=t] {code/flutter_elinux/lib/features/morse_led/business/service/morse_service.dart}
\pagebreak
Matrix
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 matrix\char\_rgb/. .2 business/. .3 service/. .4 matrix\char_service.dart.
.3 utils/.
.4 find\char\_closest\char_color\char\_index.dart. .2 data/. .3 models/. .4 pixel.dart. .2 presentation/. .3 widgets/. .4 pixel\char_painter.dart.
.3 matrix\char`_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/matrix.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/matrixInput.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\pagebreak
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/matrixColor.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/matrixColorWheel.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\lstinputlisting[language=Java, caption=Implementierung des Matrix Service, captionpos=t] {code/flutter_elinux/lib/features/matrix_rgb/business/service/matrix_service.dart}
\pagebreak
System Informationen
\Begin{multicols}{2}
\begin{figure}[H]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 system\char\_resources/. .2 business/. .3 service/. .4 memory\char_service.dart.
.3 utils/.
.4 get\char\_cpu\char_usage\char\_percentage.dart. .2 presentation/. .3 system\char_resources\char`_screen.dart.
}
\end{minipage}
\end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/systemResources.png}} \label{fig:screeplot} \end{figure}
\End{multicols}
\lstinputlisting[language=Java, caption=Implementierung des Memory Service, captionpos=t] {code/flutter_elinux/lib/features/system_resources/business/service/memory_service.dart}
\pagebreak
Einstellungen
\Begin{multicols}{2}
\begin{figure}[H]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 settings/.
.2 business/.
.3 wifi\char\_controller.dart. .2 presentation/. .3 settings\char_screen/.
.4 widgets/.
.5 color\char\_seed\char_button.dart.
.4 settings\char\_screen.dart. .3 wifi\char_settings\char\_screen/. .4 widgets/. .5 ap\char_pw\char\_dialog.dart. .5 ap\char_tile\char\_demo.dart. .5 ap\char_tile.dart.
.5 wifi\char\_bar\char_icon.dart.
.4 accesspoint\char\_screen.dart. .4 wifi\char_settings\char`_screen.dart.
}
\end{minipage}
\end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/settings.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/settingsDark.png}} \label{fig:screeplot} \end{figure}
\End{multicols}
\pagebreak
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/settingsWifiList.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/settingsWifiDetails.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\begin{multicols}{2}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/settingsWifiConnect.png}} \label{fig:screeplot} \end{figure}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/settingsWifiPasswordInput.png}} \label{fig:screeplot} \end{figure}
\end{multicols}
\begin{figure}[H] \caption{Home Screen} \centering {\includegraphics[width=8cm]{./assets/screenshots/settingsMaterial2.png}} \label{fig:screeplot} \end{figure}
\pagebreak
\lstinputlisting[language=Java, caption=Implementierung des Wifi Controllers, captionpos=t] {code/flutter_elinux/lib/features/settings/business/wifi_controller.dart}