---
header-includes: |
	\usepackage[T1]{fontenc}
	\usepackage[usefilenames,RMstyle={Text,Semibold},SSstyle={Text,Semibold},TTstyle={Text,Semibold},DefaultFeatures={Ligatures=Common}]{plex-otf}
        \usepackage[a4paper,bindingoffset=0.2in,%
                    left=4cm,right=2cm,top=2cm,bottom=2cm,%
                    footskip=.25in]{geometry}
        \usepackage{fancyhdr}
        \usepackage[utf8]{inputenc}
        \usepackage{tikz}
        \usetikzlibrary{snakes,arrows,shapes}
        \usepackage{amsmath}
        \usepackage{pgfplots}
        \usepackage{pgfplotstable}
        \pgfplotsset{compat=1.8}
        \usepackage{multicol,lipsum}
        \usepackage{listings}
        \usepackage{wrapfig}
        \usepackage[font=small,labelfont=bf]{caption}
        \usepackage{graphicx}
        \usepackage{xcolor,stackengine}
        \usepackage{colortbl}
        \usepackage{tcolorbox}
        \usepackage{lastpage}
        \usepackage{subcaption}
        \usepackage{tabularx}
        \usepackage{biblatex}
        \usepackage{float}
        \usepackage{refract}
        \usepackage{svg}
        \usepackage{setspace}
        \usepackage{titling}
        \usepackage{abstract}
	\usepackage{fvextra}
	\usepackage{emoji}
	\DefineVerbatimEnvironment{Highlighting}{Verbatim}{breaklines,commandchars=\\\{\}}
        \newcommand{\hideFromPandoc}[1]{#1}
        \hideFromPandoc{
              \let\Begin\begin
              \let\End\end
            }
        \makeatletter
        \def\fps@figure{h}
        \makeatother
nocite: |
  @*
---

\setstretch{1.5}

\setemojifont{Twemoji Mozilla}

\renewcommand{\familydefault}{\sfdefault}

\graphicspath{ {./img/} }

\overfullrule=0pt

\newcolumntype{C}{>{\centering\arraybackslash}X}

\renewcommand{\comment}[1]{\hspace{2em}{\small\textit{#1}}\bigskip\par}

\newcommand\palbox[1]{{\sffamily\fboxsep=5pt\relax\fboxrule=1pt\relax\footnotesize%
  \fcolorbox{gray!50}{gray!10}{%
    \stackengine{4pt}{%
      \colorbox[HTML]{#1}{\rule{30pt}{0pt}\rule{0pt}{30pt}}%
}{%
\color{black!60}\stackengine{6pt}{\##1}{\saycolors{#1}}{U}{l}{F}{F}{S}%
}{U}{l}{F}{F}{S}%
}%
}}
\newcommand\saycolors[1]{\relax}

\lstset{
basicstyle=\ttfamily,
columns=fullflexible,
frame=single,
breaklines=true,
postbreak=\mbox{\textcolor{red}{$\hookrightarrow$}\space},
}
%Created by Leonardo Rignanese (rignaneseleo)
%source: https://github.com/rignaneseleo/Latex-listings-Dart
%added pull_request #1: https://github.com/rignaneseleo/Latex-listings-Dart/pull/1

% Define colors to use
% You can change the colors (use http://latexcolor.com/)
\definecolor{codegreen}{rgb}{0,0.6,0}
\definecolor{codegray}{rgb}{0.5,0.5,0.5}
\definecolor{codepurple}{rgb}{0.58,0,0.82}
\definecolor{backcolour}{rgb}{0.95, 0.95, 0.96}

% Define the codebox
\lstset{
backgroundcolor=\color{backcolour},  
 commentstyle=\color{codegreen},
keywordstyle=\color{magenta},
numberstyle=\tiny\color{codegray},
stringstyle=\color{codepurple},
basicstyle=\ttfamily\footnotesize,
breakatwhitespace=false,  
 breaklines=true,  
 captionpos=b,  
 keepspaces=true,  
 numbers=left,  
 numbersep=5pt,  
 showspaces=false,  
 showstringspaces=false,
showtabs=false,  
 tabsize=2,
morestring=\*[d]{"}
%frame=shadowbox
}

% Define the code emph rules
\lstset{
% Types
emph=[1]{var, String, int, List, void, Future, await, if, else, throw, async, true, false},% Insert here the types you are using
emphstyle=[1]{\color{codepurple}},
% Functions
emph=[2]{findAllElements,findElements, setState, send, fromPath, add, parse, bytesToString},% Insert here the methods you are using
emphstyle=[2]{\color{magenta}}
}
\thispagestyle{empty}

\begin{titlepage}
\begin{center}
\Large Hochschule Rhein-Waal \\
\vspace{2.5cm}
\Large Proposal für die Bachelorarbeit \\
\vspace{2.5cm}
\huge \textbf{\textsc{Flutter als Entwicklungsplattform für eingebettete Linux Systeme: eine Fallstudie}} \\
\vspace{1.0cm}
\Large Fabian Baldeau \\
\vspace{2.5cm}
\vspace{0.25cm}
\textsc{Studiengang}\\
\vspace{0.25cm}
\textsc{Medieninformatik}\\
\vspace{2.5cm}
\textsc{Gutachter}\\
\vspace{0.25cm}
\textsc{Prof. Dr.-Ing. Ido Iurgel}\\
\vspace{0.25cm}
\textsc{Prof. Dr. Kai Essig}\\
\vspace{2cm}
\end{center}

\end{titlepage}

\pagenumbering{Roman}
\fancyhf{}
\fancyhead[C]{\thepage}
\renewcommand{\headrulewidth}{0pt}
\pagestyle{fancy}
\begin{abstract}
Die Integration von Flutter's plattformübergreifenden
UI-Fähigkeiten mit der Anpassungsfähigkeit von Embedded
Linux verspricht die Rationalisierung der Entwicklung
von Benutzeroberflächen (UIs) für eingebettete Systeme.
Diese Studie untersucht die Eignung von Flutter in
diesem Kontext durch eine Fallstudie: die Entwicklung
eines Smart Home Control Centers auf einem Raspberry
Pi mit einer angepassten Embedded Linux Distribution.
Leistungsmesswerte, Benutzerfreundlichkeit und der
Entwicklungsprozess werden bewertet. Die Ergebnisse
zeigen, dass Flutter, wenn es angepasst wird,
erfolgreich attraktive und benutzerfreundliche
eingebettete Schnittstellen mit einigen Kompromissen
bei der Leistung im Vergleich zu nativen Lösungen
erstellt.

Die Arbeit beschäftigt sich im Wesentlichen mit der Entwicklung einer
prototypischen Anwendung mit Flutter für ein eingebettetes Linux System.
Dabei soll ein Konzept ausgearbeitet werden, dass zeigt wie Flutter in
eingebetteten Linux Systemen genutzt werden kann und es soll anhand der
prototypischen Anwendung untersucht werden, wie gut Flutter für diesen
Verwendungszweck geeignet ist. Die Ergebnisse der Untersuchung sollen
dann genutzt werden um Empfehlungen für die Nutzung von Flutter in
eingebetteten Linux Systemen abzuleiten.
\end{abstract}
\pagebreak
\tableofcontents
\pagebreak

<!-- \fzframelinU{
\centering
\Huge{Kurz-Exposé} \\
\Large{\emph{Subtitle}}\\
\vspace{0.25cm}
\small{University/School}\\
\small{Class}\\
\small{Name}
}

\vspace{8pt} -->

\renewcommand{\headrulewidth}{0pt}

\pagenumbering{arabic}

<!-- \fancyfoot[C]{Seite \thepage\ von \pageref{LastPage}} -->

\fancyhead[C]{}
\fancyfoot[R]{\thepage}
## Motivation und Relevanz

<!-- Eingebettete Systeme sind allgegenwärtig und prägen unsere
Interaktion mit Maschinen. Ob in der Automobilindustrie,
Haushaltsgeräten oder Selbstbedienungskiosks - grafische
Benutzeroberflächen (GUIs) auf Touchscreens ermöglichen die
intuitive Steuerung und Bedienung dieser Systeme.

Die Entwicklung von GUIs für eingebettete Linux-Systeme stellt
Entwickler jedoch vor Herausforderungen. -->

In der heutigen Zeit verbringen Menschen in der Regel mehr Zeit damit,
über einen Bildschirm mit Maschinen zu interagieren, anstatt Maschinen
mechanisch zu steuern. Dieser Trend lässt sich gut bei der Automobilindustrie
oder an Haushaltsgeräten beobachten, wo immer mehr Funktionen über einen
Touchscreen mit einer grafischen Benutzeroberfläche (GUI) angesteuert werden.
Über die GUI können Benutzer Funktionen wie Musik, Radio, Telefon,
Temperaturregelung und mehr ansteuern. Ebenso kann die Öffentlichkeit am Flughafen
oder in Restaurants über einen Selbstbedienungskiosk mit Unternehmen
kommunizieren. Der Kiosk führt eine GUI auf einem Anzeigegerät aus und über
den Touchscreen des Kiosks können Maschinen die Kundenwünsche erfüllen.
Zusammenfassend lässt sich sagen, dass es in der Industrie einen zunehmenden
Trend gibt, dass der Endverbraucher auf bequeme und effiziente Weise mit GUIs
interagiert, um Aufgaben zu erledigen.

Aus Entwicklersicht ist die Erstellung einer eleganten GUI deshalb von
entscheidender Bedeutung, da GUIs immer mehr eine der Schlüsselkomponenten
sind bei der Kommunikation zwischen Mensch und Maschine. Benutzeroberflächen
für eingebettete Linux Systeme zu entwickeln ist jedoch ein komplexer Prozess
bei dem das meist genutzte Anwendungsframework und GUI-Toolkit Qt ist, welches
speziell für den Einsatz in eingebetteten Systemen aber teils hohe
Lizenzkosten mit sich bringt und in der Entwicklung aufwendig ist aufgrund
der Nutzung von C++ und traditionellen Designmethoden. Besonders die
Entwicklung von Benutzeroberflächen, die sich für Nutzer so vertraut wie beim
Smartphone per Toucheingabe steuern lassen, kann eine große Hürde darstellen.
Googles neuartiges quelloffenes Benutzerschnittstellen-Entwicklungs-Kit Flutter
bietet hier ein großes Potential für die Entwicklung von GUIs für eingebettete
Linux Systeme, da es besondere Eigenschaften besitzt, die die Entwicklung
vereinfachen können. So ist Flutter frei von jeglichen Lizenzkosten, speziell
für die Entwicklung von Benutzeroberflächen für Touchscreens stärker optimiert
und erlaubt es dank einer Hot-Reload Funktion Änderungen an dem Programm in
Echtzeit zu sehen und auszutesten. Zudem wird Flutter mit der Programmiersprache
Dart entwickelt, die im Vergleich zu C++ einfacher zu erlernen ist.

In Hinsicht dessen soll in dieser Bachelorarbeit untersucht werden, ob Flutter
als Entwicklungsplattform für eingebettete Linux Systeme geeignet ist. Denn
neben dem Potenzial für Unternehmen kann es auch besonders interessant für
Hochschulprojekte sein, weil Studenten sich potenziell einfacher in die
Entwicklung einarbeiten könnten und die BSD Lizenzierung bei Flutter attraktiv ist.
## Ziel der Arbeit

Die Arbeit beschäftigt sich im Wesentlichen mit der Entwicklung einer
prototypischen Anwendung mit Flutter für ein eingebettetes Linux System.
Dabei soll ein Konzept ausgearbeitet werden, dass zeigt wie Flutter in
eingebetteten Linux Systemen genutzt werden kann und es soll anhand der
prototypischen Anwendung untersucht werden, wie gut Flutter für diesen
Verwendungszweck geeignet ist. Die Ergebnisse der Untersuchung sollen
dann genutzt werden um Empfehlungen für die Nutzung von Flutter in
eingebetteten Linux Systemen abzuleiten.
# Flutter

## Einleitung

Flutter ist ein

- Flutter's core design principles center on a declarative,
  reactive UI paradigm, where the developer defines the desired
  interface state, and the framework efficiently handles updates

## Architektur

![Architektur](assets/flutter/archdiagram.png){#id .class width=400}

\begin{figure}[ht]
\centering
\includegraphics[scale=1]{assets/flutter/archdiagram.png}
\caption{Example caption}

\caption*{Source: me}
\end{figure}

## Key Design Concepts

### Deklarative Programmierung

Deklarative Programmierung ist ein Programmierparadigma

\lstinputlisting[language=Java, caption=Beispiel öpvn, linerange={65-73}]
{code/flutter_architecture/lib/main.dart}
<!--
Challenges with Direct Statistics

No Centralized Reporting:
Unlike mobile OS usage (Android vs. iOS), there's no unified app store
or market survey specifically for embedded Linux UIs. Projects range
from hobbyist work to closed-source industrial systems, making data
collection highly fragmented.

Embedded Development Diversity:
The range of devices running embedded Linux is immense, varying greatly
in purpose and visibility. This creates a large sample space that’s
hard to track systematically.

Subjectivity in Definition:
What constitutes "most used" gets tricky. Is it by volume of devices
regardless of scale, or by developer preferences in recent projects?
-->
# Yocto Environment

## Poky

## Metadata

## Open-Embedded Project

## Bitbake

## Board support package

## Meta-Flutter

# Setting up the build environment and building the image

# Flashing the image on Target
<!-- TODO: Was ist Flutter? -->

# Flutter

Die zunehmende Verbreitung mobiler Geräte und Betriebssysteme
stellt die effiziente Anwendungsentwicklung vor Herausforderungen.
Plattformübergreifende Frameworks wie Flutter zielen darauf ab,
diese Herausforderungen zu mildern, indem sie ein einheitliches
Toolset zum Erstellen von Benutzeroberflächen (UIs) bereitstellen,
die nahtlos über verschiedene Plattformen hinweg funktionieren.
Dieses Kapitel befasst sich mit der grundlegenden Architektur,
den Vorteilen und Überlegungen zur Verwendung von Flutter für
die Anwendungsentwicklung. [@theflutterwayFlutterRubberDuck2022]

Was ist Flutter [@FlutterArchitecturalOverviewb]

test [@weiserComputer21stCentury1999]

```{#test .dart .number-lines caption="Example Dart test"}
import 'package:retry/retry.dart';

final response = await retry(
  // Make a GET request
  () => http.get('https://google.com').timeout(Duration(seconds: 5)),
  // Retry on SocketException or TimeoutException
  retryIf: (e) => e is SocketException || e is TimeoutException,
);
print(response.body);
```

Nice Dart highlighting!

![](./assets/skizzen/led.png)

WORKING :)
# Entwicklungsumgebung

## Setup und Konfiguration von Flutter

## Setup von Raspberry Pi
<!-- 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.
-->
\pagebreak

# Literaturverzeichnis
