<!-- Core Principles

Lightweight Embedder: flutter-pi acts as a custom Flutter engine
embedder tailored for the Raspberry Pi. This means it provides the
essential interface layer between Flutter's primarily C++ engine
and the embedded Linux environment (like on a Raspberry Pi).

No X11 Required: Notably, flutter-pi achieves this feat without
 the graphical overhead of a system like X11 (common in desktop
 Linux). This aligns better with resource-constrained embedded
 devices.

Direct Rendering:
flutter-pi interacts with lower-level graphics APIs within the
 Raspberry Pi (e.g., Broadcom's VideoCore, EGL) to handle rendering
 of the Flutter UI onto the display hardware.

Key Responsibilities

Initialization:
Sets up the Flutter engine, loads appropriate libraries, and
gets everything ready for the Flutter application to run.

Event Handling: Manages input events (touch via touchscreen,
keyboard, mouse, etc.) and routes them from the embedded Linux
system to the Flutter framework for processing.

Rendering Loop: Coordinates requesting the next Flutter UI fram
e in response to events or state changes, communicates with the
rendering backends, and facilitates displaying the content.

Platform Channels: (Likely) Provides mechanisms for the Flutter
app to communicate with the underlying embedded Linux system.
This enables the app to potentially access device-specific
sensors, hardware control, and features outside the scope of
Flutter's core framework.

How to Utilize It

Prepare Environment: You'll need a Raspberry Pi running an
embedded Linux distribution and a toolchain suitable for
cross-compilation.

Obtain/Build flutter-pi: Refer to the project's GitHub repository
for build instructions.

Develop Flutter App: Structure your Flutter app normally, being
mindful of platform interactions that might need platform channels
(step 4).

Integrate & Compile: Follow flutter-pi's instructions to compile
your Flutter app code while linking against the flutter-pi embedder
you obtained/built.

Deploy & Run: Transfer the compiled output to your Raspberry Pi
and execute it with appropriate flutter-pi settings.

Caveats

Experimental: Not considered production-ready for every use-case (as might be expected with projects pushing Flutter’s boundaries).
Limited APIs: Compared to mainstream platforms, Flutter’s full suite of plugins and packages might not be compatible without extra platform channel work on your end.
-->

<!-- Introduction:

- Clearly describe what your Flutter application does and its main functionality.

Architecture:

- Diagram and explain your app's structure (state management approach, key widgets, navigation).
- Consider using visual aids to make this section more engaging.

Key Design Concepts:

- Challenges solved by your design choices.
- Did you address performance optimizations for embedded systems?
- How did you make the UI fit for the embedded target? -->

## Implementierung der Features

\pagebreak

### Home

\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 home/.
.2 presentation/.
.3 home\char`\_screen.dart.
}
\end{minipage}
\end{figure}

\begin{multicols}{2}

\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/home.png}}
\label{fig:screeplot}
\end{figure}

\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/homeDebug.png}}
\label{fig:screeplot}
\end{figure}

\end{multicols}

\pagebreak

### Material Demo

\begin{figure}[ht]
\caption{Example caption}
\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{multicols}{2}

\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/material3.png}}
\label{fig:screeplot}
\end{figure}

\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/material3Dialog.png}}
\label{fig:screeplot}
\end{figure}

\end{multicols}

\pagebreak

### Benchmark

\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

\begin{figure}[ht]
\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{multicols}{2}

\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

### 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}

\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}

\pagebreak

### System Informationen

\begin{figure}[ht]
\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}

\pagebreak

### Einstellungen

\begin{figure}[ht]
\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{multicols}{2}

\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}