Cross-Plattform-Entwicklung: Flutter 2 will den Desktop erobern

Das bisher auf mobile Endgeräte ausgelegte Framework bringt eine stabile Anbindung für Webanwendungen und führt den Desktop als Zielplattform ein.

In Pocket speichern vorlesen Druckansicht 9 Kommentare lesen

(Bild: Ko Thongtawat / Shutterstock.com)

Lesezeit: 7 Min.
Von
  • Rainald Menge-Sonnentag
Inhaltsverzeichnis

Google hat Version 2.0 von Flutter veröffentlicht. Die neue Hauptversion markiert eine breitere Ausrichtung des Cross-Plattform-Frameworks, das bisher vor allem auf iOS und Android abzielte. Die bisher als Beta gekennzeichnete Web-Zielplattform gilt nun als stabil. Gleichzeitig bringt das Release eine als Beta gekennzeichnete Anbindung für Desktopanwendungen unter Windows, macOS und Linux im stabilen Channel mit.

Wie üblich ist parallel zum Framework eine frische Version der zugehörigen Programmiersprache Dart erschienen. Die aktuelle Version 2.12 stabilisiert die Null Safety und hat ein Foreign Function Interface (FFI) zum Aufrufen nativer C-Funktion an Bord.

Ende 2019 hatte sich Flutter bereits für das Web geöffnet und die Zielplattform neben iOS und Android zunächst als Beta integriert. Mit dem aktuellen Release gilt die Web-Anbindung nun als stabil. Während der Testphase hat sich das Flutter-Team vor allem auf die Performance und Erweiterbarkeit über Plug-ins konzentriert. Daneben standen unterschiedliche Formfaktoren für Webanwendungen auf dem Deskotp sowie Web-spezifische Funktionen im Fokus der Entwicklung.

Dabei experimentierte das Team mit unterschiedlichen Methoden der Darstellung. Ursprünglich setzte Flutter analog zu vielen JavaScript-Frameworks auf einen rein HTML- beziehungsweise DOM-basierten (Document Object Model) Ansatz. Version 2.0 bringt nun zwei Rendering-Methoden für unterschiedliche Szenarien: Der HTML-Renderer setzt auf eine Kombination aus HTML-Elementen, CSS (Cascading Style Sheets), Canvas-Elementen und SVG (Scalable Vector Graphics).

Die Schicht für Flutter-Anwendungen im Browser nutzt eine Kombination aus HTML/CSS, WebGL, WebAssembly und CanvasKit.

(Bild: Google)

Der CanvasKit-Renderer setzt Flutter-Anwendungen im Web ebenso um wie als App für mobile Plattformen. Er nutzt WebAssembly und WebGL und bringt zur Laufzeit eine bessere Performance vor allem für grafiklastige Anwendungen. Der Preis dafür ist eine um etwa 2 MByte höhere Download-Größe als beim HTML-Renderer.

Flutter bringt zudem einige Elemente mit, die speziell auf Webanwendungen zugeschnitten sind. Zum einen ermöglicht die neue Link-Klasse Hyperlinks, die direkt zu Ankern innerhalb von HTML-Dokumenten führen. Außerdem führt das Framework eine URL-Strategie ein, mit der Entwicklerinnen und Entwickler steuern können, wie das System einen Link verfolgt und welche URL der Browser in der Adresszeile anzeigt.

Für Texte im Browser erweitert das Framework zum einen die Maßeinheiten für die Canvas-basierte Textdarstellung, um grafische Elemente und Texte exakt aufeinander abzustimmen und beispielsweise Highlight-Boxes hinter textlichen Inhalten passgenau zu rendern.

Außerdem existieren die Widgets SelectableText und EditableText zum Auswählen beziehungsweise Kopieren und Einfügen sowie zum Bearbeiten. Schließlich kann das Framework die Autofill-Funktion des jeweiligen Browsers zum Ausfüllen von Textfeldern nutzen.

Der Desktop als Zielplattform befindet sich im Stable Channel von Flutter mit einem "Early Release"-Flag. Das Team bezeichnet die Umsetzung als Beta-Snapshot, und das endgültige, stabile Release soll im Lauf des Jahres folgen. Bisher waren Desktop-Anwendungen mit Flutter als experimentell gekennzeichnet. Die Anbindung von Windows als jüngste Zielplattform existiert erst seit September 2020.

Anpassungen betreffen unter anderem die Eingabe über die Maus, die anders als das Verarbeiten von Touch-Eingaben ohne Verzögerung arbeitet. Ähnliches gilt für einige Drag-and-Drop-Funktionen wie das Verschieben von Elementen in der ReorderableListView, die auf dem Desktop direkt über ein spezielles Drag-Icon erfolgt, statt wie auf Mobilgeräten auf eine längere Berührung zu reagieren.

Mit Blick auf Desktopanwendungen ist das direkte Ziehen von Elementen über Drag-Handles möglich.

(Bild: Google)

Daneben hat das Scrollbar-Widget eine Überarbeitung erfahren und eine zusätzliche Klasse ScrollbarTheme für die Gestaltung bekommen. Darüber hinaus erhalten die Widgets TextField und TextFormField Kontext-Menüs sowohl für das Material- als auch das Cupertino-Design.

Als Einstiegshilfe für die Cross-Plattfom-Entwicklung mit unterschiedlichen Bildschirmgrößen auf mobilen Endgeräten sowie dem Linux-, macOS- und Windows-Desktop hat Google eine Demo-App namens Flutter Folio veröffentlicht. Außerdem hat die Dokumentation einen eigenen Abschnitt zum Erstellen und Paketieren von Anwendungen für die unterschiedlichen Desktop-Plattformen.

Die parallel zu Flutter 2.0 veröffentlichte Version 2.12 der Programmiersprache Dart setzt nun wie im Oktober 2020 angekündigt standardmäßig auf Null Safety und ermöglicht die sogenannte Sound Null Safety. Sound bedeutet in dem Zusammenhang korrekt oder einwandfrei, und Dart kennt analog zur Null Safety das Sound Type System zur strikten Typprüfung.

In Dart 2.12 ist die erstmals in Dart 2.8 vorgestellte Null Safety standardmäßig aktiviert, wodurch Variablen nur dann den Wert null annehmen darf, wenn sie im Code explizit durch ein angehängtes Fragezeichen als Nullable gekennzeichnet ist. Dabei versteht sich von selbst, dass eine solche Variable im Code keiner regulären zugewiesen werden darf.

Die Demoanwendung zeigt mögliche Fallstricke im Umgang mit Null Safety.

(Bild: Google)

Dart überprüft den Sourcecode mit einer Programmflussanalyse, um beispielsweise zu erkennen, dass eine als Nullable gekennzeichnete Variable nie den Wert Null annehmen kann und somit als Non-Nullable gelten darf, wie in folgendem Codeausschnitt aus der Ankündigung zu Dart 2.12:

int definitelyInt(int? aNullableInt) {
  if (aNullableInt == null) {
    return 0;
  }
  // aNullableInt has now promoted to a non-null int.
  return aNullableInt; 
}

Die Programmiersprache kennt sowohl Sound als auch Unsound Null Safety. Erstere ist das Standardvorgehen für Anwendungen, die komplett den Einsatz von null für Variablen ohne Kennzeichnung verbietet. Der Unsound-Modus ist für Anwendungen gedacht, die eine Mixtur aus Code mit und ohne Null Safety verwenden, um beispielsweise das geschmeidige Portieren von Anwendungen zu gewährleisten oder ältere Libraries einbinden zu können. Ein Migrationsleitfaden soll bei der Umstellung auf Null-Safety-Anwendungen helfen.

Dart FFI zum Anbinden von C-Libraries an Dart Anwendungen zielt unter anderem auf Desktopanwendungen, die auf System-Libraries von Windows, macOS und LInux zugreifen. Auch für die Machine-Learning-Library TensorFlow Lite existiert ein FFi-Plug-in. Das bisher als Beta gekennzeichnete Foreign Function Interface gilt mit Dart 2.12 als stabil.

Gleichzeitig bringt es einige Ergänzungen mit. Dazu gehört, dass Entwicklerinnen und Entwickler neuerdings Structs sich nicht nur als Referenz (by Reference), sondern als direkte Werte (by Value) übergeben können:

struct Link {
  double value;
  Link* next;
};
void MoveByReference(Link* link) {
  link->value = link->value + 10.0;
}
Coord MoveByValue(Link link) {
  link.value = link.value + 10.0;
  return link;
}

Außerdem kann Dart verschachtelte Struct-Elemente (Nested Structs) aus C verarbeiten. Im Zuge der Erweiterung führt die Sprache einige Anpassungen ein. Unter anderem ist das Erstellen leerer Struct-Elemente neuerdings verboten. Als Ersatz repräsentiert der neue Typ Opaque ein leeres Struct.

Das Team hat zudem ein Tool veröffentlicht, das automatisch FFI-Wrapper aus C-Header-Dateien erstellt. Weitere Details wie die Ergänzungen der Werkzeugkiste Flutter DevTools lassen sich den Blogbeiträgen zu Dart 2.12 und Flutter 2.0 entnehmen.

(rme)