Es gab eine Zeit, in der sich Entwickler zwischen universellen, mobilen und nativen Apps entscheiden mussten. Erstere machten sich Web-Technologien wie HTML und JavaScript zunutze, die auf mobilen Endgeräten aber oft suboptimal funktionierten. Letztgenannte schnitten besser ab, weil sie für jede zu unterstützende Plattform separat geschrieben wurden. Das trieb aber auch den Aufwand und die Kosten für die Entwicklung in die Höhe.

Das von Google entwickelte Open-Source-Framework Flutter hat dieses Szenario geändert: Heute stehen Entwicklern mehr Optionen zur Verfügung, um performante, mobile Applikationen zu erstellen, die auf mehreren Plattformen laufen - etwa Ionic, React Native und Xamarin. Flutter und dessen integrierte Programmiersprache Dart sind bereits sehr populär und weit verbreitet. Flutter 3, das Anfang 2022 veröffentlicht wurde, bietet Support für alle wichtigen Plattformen und enthält zudem Performance-Optimierungen, um eine unterbrechungsfreie User Experience zu gewährleisten.

Multi-Plattform-Entwicklung mit Flutter

Flutter ermöglicht Ihnen, nativ kompilierte, plattformübergreifende Anwendungen aus einer einzigen Codebasis zu erstellen. Flutter 3 unterstützt sechs Plattformziele:

• Android,

• iOS,

• Windows,

• macOS,

• Linux und

• Webanwendungen.

Flutter-Widgets werden mit einem modernen, von React inspirierten Framework erstellt. Wie in Abbildung 1 zu sehen, kommen am häufigsten Text-Widgets, Flexbox-Zeilen- und Spaltenlayouts sowie Stack-Layouts mit absoluter Positionierung, positionierte Widgets und Container-Widgets zum Einsatz.

Nehmen wir an, Sie bauen eine Multiplattform-Anwendung: Den Startpunkt bildet in diesem Fall das Flutter MaterialApp-Widget. Dieses Widget erstellt verschiedene andere nützliche Widgets im Root-Verzeichnis Ihrer Anwendung, einschließlich eines Navigators. Dieser verwaltet einen Stapel von Widgets, die durch Strings identifiziert werden (in Flutter als "routes" bezeichnet). Mit Hilfe des Navigators können Sie reibungslos zwischen den App-Screens hin und her wechseln.

Um ein iOS-zentrisches Design zu erstellen, werfen Sie einen Blick auf das Cupertino-Komponentenpaket. Das Flutter-Team empfiehlt, dieses Paket, ausschließlich für iOS-Apps zu verwenden. Für Multiplattform-Apps empfehlen sich andere Widget-Sets, beispielsweise Material Design.

Die folgenden Screenshots zeigen Stateless Widgets, Gestensteuerung und Stateful Widgets. Dabei lohnt es sich, das gesamte Flutter-Entwicklungs-Tutorial zu durchlaufen, beginnend mit dem Widgets Intro. In diesem Zuge sollten Sie auch einen Blick auf DartPad Samples, Flutter Gallery und Flutter Codelabs werfen.

Neben Widgets und Layouts bietet Flutter auch:

• Navigation und Routing,

• Animationen,

• Actions und Intents,

• Shortcuts,

• State Management,

• Networking und HTTP,

• JSON-Serialisierung und

• Firebase-Integration.

Flutter und Dart

Flutter wird von der Programmiersprache Dart angetrieben, die für schnelle Anwendungen auf jeder Plattform optimiert ist. Dart sieht ähnlich aus wie Java, Kotlin, Swift und TypeScript (siehe Abbildung 4). Wenn Sie objektorientierte Sprachen verstehen, werden Sie keine Probleme damit haben, sich schnell in Dart einzuarbeiten. Auch hierzu gibt es einen empfehlenswerten Überblick.

Ein sehr einfaches Programm auf Dart-Basis könnte zum Beispiel wie folgt aussehen:

// Define a function.

void printInteger(int aNumber) {

print('The number is $aNumber.'); // Print to console.

}

// This is where the app starts executing.

void main() {

var number = 42; // Declare and initialize a variable.

printInteger(number); // Call a function.

}

Dart ist stark typisiert, aber Typ-Annotationen sind optional, da Dart Typen ableiten kann. var und Typinferenz zu verwenden, ist der bevorzugte Stil für lokale Variablen, für Funktionen und Public-Variablen empfiehlt sich eine starke Typisierung. Im Gegensatz zu Java sind die Keywords public, protected und private in Dart nicht vorhanden. Beginnt ein Identifier mit einem Unterstrich (_), ist er für seine Library privat.

Dart kann in ARM- und x64-Maschinencode für Mobile-, Desktop- und Backend-Applikationen sowie in JavaScript für das Web kompiliert werden. Im Debug-Modus können Sie mit Dart laufende Anwendungen laden, nachdem Sie Änderungen am Quellcode gespeichert haben. Dart verfügt sowohl über JIT- (Just-in-Time) als auch AOT (Ahead-of-Time) -Compiler.

Optional bietet die Programmiersprache auch Null Safety: Wenn Ihre minimale SDK-Beschränkung (im pubspec.yaml-File Ihrer Anwendung) mindestens 2.12.0 ist, haben Sie der Null Safety zugestimmt. In diesem Fall dürfen nur Variablen mit einem Typ gefolgt von einem Fragezeichen (beispeilsweise int?) Nullen enthalten.

Flutter 3 mit neuen Funktionen und Upgrades

Tim Sneath, Produktmanager für Flutter und Dart bei Google, fasst im Rahmen eines Blog-Posts die neuen Funktionen von Flutter 3 zusammen. Dabei konstatiert er, dass "Flutter 3 die Roadmap von einem mobil-zentrierten zu einem Multiplattform-Framework vervollständigt."

Flutter 3:

• erweitert die verfügbaren Plattformziele um Support für macOS und Linux-Desktop-Apps,

• integriert Flutter vollständig in Firebase,

• fügt native Entwicklungsunterstützung für Apple Silicon hinzu und

• enthält zahlreiche Produktivitäts- und Leistungsfunktionen.

Der Flutter Showcase ist im Wesentlichen eine Sammlung von Case Studies zu Produktionsanwendungen, die mit Flutter entwickelt wurden. Sie ist vor allem für Manager nützlich, die den Einsatz von Flutter in Erwägung ziehen.

Die Flutter Gallery enthält eine Sammlung von Widgets, Verhaltensmustern und Vignetten, die zeigen, wie Flutter funktioniert und ist für Entwickler und Designer nützlich. Sie können die Galerie im Web betrachten oder sie lokal auf einer der unterstützten Plattformen ausführen (über das entsprechende Repository).

Flutter installieren

Sie können Flutter auf Windows, macOS, Linux oder Chrome OS installieren. Wie das im Einzelnen abläuft, hängt vom jeweiligen System ab. Sie haben die Wahl:

• entweder eine systemspezifische .zip-Datei herunterzuladen und zu entpacken

• oder das Repository zu klonen.

Anschließend müssen Sie das flutter-Tool zu Ihrem Pfad hinzufügen und flutter doctor ausführen. Im Folgenden sehen Sie den Output von flutter doctor:

Running "flutter pub get" in flutter_tools... 5.1s

Doctor summary (to see all details, run flutter doctor -v):

[?] Flutter (Channel stable, 3.0.1, on Mac OS X 10.15.7 19H1922 darwin-x64,

locale en-US)

[?] Android toolchain - develop for Android devices

Install Android Studio from:

https://developer.android.com/studio/index.html

components.

(or visit https://flutter.dev/docs/get-started/install/macos#android-setup

for detailed instructions).

If the Android SDK has been installed to a custom location, please use

`flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 12.4)

Download the latest version or update via the Mac App Store.

CocoaPods is used to retrieve the iOS and macOS platform side's plugin

code that responds to your plugin usage on the Dart side.

Without CocoaPods, plugins will not work on iOS or macOS.

For more info, see https://flutter.dev/platform-plugins

To install see

https://guides.cocoapods.org/using/getting-started.html#installation for

instructions.

[?] Chrome - develop for the web

[!] Android Studio (not installed)

[?] IntelliJ IDEA Ultimate Edition (version 2022.1.1)

[?] IntelliJ IDEA Ultimate Edition (version 2022.1.1)

[?] VS Code (version 1.67.1)

[?] Connected device (2 available)

[?] HTTP Host Availability

Sie können im Output erkennen, dass das verwendete Intel MacBook Pro zu alt ist, um Xcode (erforderlich für iOS- und macOS-Entwicklung mit Flutter) zu unterstützen. Flutter benötigt mindestens Xcode 13, um universelle Intel/M1 macOS-Binärdateien zu erstellen. Man kann für Android entwickeln, indem die Android SDK Toolchain installiert wird. Das Flutter-Plugins zu Visual Studio Code hinzuzufügen nimmt weniger als eine Minute in Anspruch.

Flutter 3 ist ein interessanter Benchmark, der Stabilität auf sechs Plattformen bietet und weiterhin auf Performance-Optimierungen fokussiert. Für Entwickler, die plattformübergreifende Anwendungen erstellen müssen, ist das Entwicklungs-Tool eine Überlegung wert. (fm)

Dieser Beitrag basiert auf einem Artikel unserer US-Schwesterpublikation Infoworld.