You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
4.8 KiB
54 lines
4.8 KiB
\section{Flutter}
|
|
|
|
Um die konkrete Problemstellung im Detail verstehen zu können, ist es erforderlich, die grundlegende Plattform näher zu betrachten. Dabei wird zu Beginn erst ein Überblick über das Cross-Plattform-Werkzeug Flutter gegeben und im Anschluss detaillierter auf einzelne Aspekte, die für die Erfassung der Problemstellung von Relevanz sind, eingegangen.
|
|
|
|
\subsection{Einordnung der Rolle für die Entwicklung von Apps}
|
|
|
|
In diesem Abschnitt wird ein grober Überblick über die aktuelle Situation bei der Entwicklung von Apps gegeben. Flutter ist ein von dem US-amerikanischen Digitalunternehmen Google entwickeltes Cross-Plattform-Werkzeug, welches es ermöglichen soll, mobile Anwendungen (Apps) für die Smartphone-Betriebssysteme iOS und Android mit einer gemeinsamen Code-Basis zu entwickeln. \autocite{flutterFirstBeta} In der etablierten App-Entwicklung ist es weit verbreitet, zwei separate Anwendungen für die beiden dominierenden Betriebssysteme iOS und Android zu entwickeln. Eine Analyse von Appfigures zeigt dabei, dass im Apple App Store 55 \% der analysierten Apps auf Swift basieren, welches für die sogenannte native iOS-Entwicklung genutzt wird, und im Google Play Store 38 \% der analysierten Apps auf Kotlin basieren, welches dem Pendant zu Swift für Android entspricht.\autocite{sdkPopular} Das Entwickeln von zwei getrennten Anwendungen bringt dabei die Erfordnis mit sich, Quelltext zu duplizieren, da für Android entwickelter Software nicht mit iOS kompatibel ist und umgekehrt.
|
|
|
|
Neben Flutter existieren auch andere Cross-Plattform Werkzeuge, die das gleiche Problem lösen möchten. Diese werden jedoch nicht in dieser Ausarbeitung näher betrachtet. Erwähnenswert jedoch sollte sein, dass das von Meta entwickelte React Native SDK vom Design ähnlich ist und Flutter dieses \blockquote[\cite{reactNativeVsFlutter}]{well preserved} hat, sodass auch dieses SDK von den hier in der Ausarbeitung beschriebenen Problemen betroffen sein kann und die Ergebnisse somit als Basis für eine ähnliche Evaluation verwendet werden könnten.
|
|
|
|
\subsection{Technischer Überblick}
|
|
|
|
Dieser Abschnitt vermittelt die technischen Grundlagen für die Flutter Technologie. Flutter und die damit entwickelten Anwendungen werden mit der Dart-Programmiersprache entwickelt. Dart lässt sich dabei mir den bereits etablierten Programmiersprachen wie Java oder JavaScript vergleichen wie in \autoref{lst:dartExample} zu sehen ist und ist objektorientierte, optional statisch typisierte \autocite{dartTypes}.
|
|
|
|
\begin{lstlisting}[caption={Aufbau eines einfachen Flutter-Widgets in Dart}, label={lst:dartExample}]
|
|
import 'package:flutter/material.dart';
|
|
|
|
class ExampleWidget extends StatelessWidget {
|
|
const ExampleWidget({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return const Text('Hello World');
|
|
}
|
|
}
|
|
\end{lstlisting}
|
|
|
|
Von der Architektur her ist Flutter in einem Schichtentwurf aufgebaut, wie in \autoref{fig:flutterArch} zu sehen ist.
|
|
|
|
\begin{figure}[h]
|
|
\centering
|
|
\includegraphics[width=0.6\textwidth]{chapters/basics/archdiagram.png}
|
|
\caption{Architekturdiagramm von Flutter \autocite{flutterArch}}
|
|
\label{fig:flutterArch}
|
|
\end{figure}
|
|
|
|
Die unterste \texttt{Embedder}-Schicht ist dabei für jede der unterstützten Plattformen einzeln implementiert und stellt den oberen Schichten Resourcen zur Verfügung, wie beispielsweise ein Zeichnungsbereich, indem die Benutzeroberfläche gerendert werden kann. Zudem können hier native Erweiterungen eingebunden werden, die es der App später ermöglicht, von Flutter / Dart aus auf native Betriebssystemfunktionen wie die Kamera zuzugreifen.
|
|
|
|
Die mittlere \texttt{Engine}-Schicht beinhaltet die meisten performance-kritischen Komponenten und stellt eine universelle Plattform für das Framework zur Verfügung so beinhaltet sie beispielsweise die Rendering-Engine. Anders als bei anderen Cross-Plattform-Frameworks wird in Flutter die komplette Benutzeroberfläche nicht mit nativen Design-Elementen dargestellt, sondern mit dieser eigenen Rendering-Engine gezeichnet. Dies bietet dabei den Vorteil, dass Design-Konzeptionen auf allen Plattformen gleich aussehen.
|
|
|
|
Die obere \texttt{Framework}-Schicht setzt auf den beiden unteren Schichten auf und bietet die Schnittstellen, die zur Entwicklung von Apps benötigt werden. Zudem beinhaltet sie einen umfangreichen Katalog an Standard-Widgets, die sich am Design der beiden Betriebssysteme iOS und Android orientieren. Diese Widgets sind in den Cupertino-Katalog für das iOS-ähnliche Design und in den Material-Katalog für das besonders auf Android oft genutzte Material-Design eingeordnet.
|
|
|
|
Das Konzept des Widgets, welches bereits öfters bisher erwähnt worden ist, wird in dem folgenden Kapitel näher beleuchtet.
|
|
|
|
|
|
|
|
Was ist Flutter?
|
|
|
|
Wie funktioniert Flutter?
|
|
|
|
Wie ist die Architektur eine Flutter Anwendung?
|
|
|
|
Wie funktioniert Testing unter Flutter?
|
|
|
|
|