572 lines
13 KiB
Markdown
572 lines
13 KiB
Markdown
<!-- 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
|
||
|
||
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}
|
||
|
||
<!-- \begin{figure}[H]
|
||
\caption{Home Screen}
|
||
\centering
|
||
{\includegraphics[width=8cm]{./assets/screenshots/material3Dialog.png}}
|
||
\label{fig:screeplot}
|
||
\end{figure} -->
|
||
|
||
\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}
|