Cross-Plattform-Entwicklung: Flutter 2.2 zielt auf bessere Darstellung im Web

Google hat Version 2.2 des Cross-Plattform-Frameworks Flutter veröffentlicht. Das erste Release seit der jüngsten Hauptversion bringt vor allem Anpassungen für Webanwendungen mit. Außerdem zielt es vermehrt auf sogenannte Plattform-adaptive Apps, die nicht nur Formfaktoren, sondern auch Eingabemethoden berücksichtigen.

Während Flutter in den Anfangszeiten vor allem auf die Mobilentwicklung für iOS und Android ausgelegt war, hat Version 2.0 das Web als Zielplattform stabilisiert. Die jüngste Hauptversion ist im März erschienen, und Version 2.1 hat nicht das Licht der Öffentlichkeit erblickt, sondern ist nur als Vorabversion im Dev-Channel verfügbar. Die Sprünge sind bei Flutter durchaus üblich, so reihen sich die jüngsten 1.x Versionen als 1.12, 1.17, 1.20 und 1.22 auf.

Geschmeidig im Hintergrund

Das Herunterladen und Starten von Flutter-Anwendungen im Web war bisher ein wenig holprig: Zwar hat sich ein Service Worker im Hintergrund um den Download gekümmert, aber Nutzerinnen und Nutzer mussten die Seite manuell aktualisieren, um die vollständige Anwendung zu sehen – und das wohl teilweise sogar mehrfach. Der neue Dienst kümmert sich nun eigenständig um das Aktualisieren der Seite.

Damit der neue Service Worker greift, müssen Entwicklerinnen und Entwickler die Index-Seite ihres Projekts aktualisieren, indem sie index.html löschen und den Befehl flutter create . ausführen.

Für die Webentwicklung lassen sich zudem nun über Cascading Style Sheets (CSS) angelegte Font Features im HTML-Renderer nutzen. Flutter bietet für Webanwendungen zwei unterschiedliche Arten des Rendering-Prozesses: Der HTML-Renderer setzt auf eine Kombination aus HTML-Elementen, CSS, Canvas-Elementen und SVG (Scalable Vector Graphics).

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. Beide Rendering-Arten können ab sofort Shader-Masken verwenden, und der Befehl computeLineMetrics lässt sich ebenso wie für mobile Apps nutzen.

Besser angepasst

Unter dem Stichwort Plattform-adaptive Apps zielt Flutter darauf, bei der Cross-Plattformentwicklung nicht nur unterschiedliche Formfaktoren vom Smartphone über das Tablet bis zum Desktop zu berücksichtigen, sondern auch unterschiedliche Eingabemethoden wie Touchscreen oder Maus plus Tastatur. Zudem sollen die Anwendungen auf die plattformspezifische Navigation über Navigation Drawer beziehungsweise Systemmenüs eingehen. In der Flutter-Dokumentation findet sich ein Leitfaden für adaptive Apps, von Googles Entwicklerkonferenz I/O 2021 existiert ein Video zum Thema.

Hinsichtlich der Barrierefreiheit hat sich ebenfalls einiges getan: Unter anderem hat das Team die Einbindung von Screen-Readern und die Navigation über einzelne Elemente verbessert. Nennenswert ist noch, dass unter iOS nun die inkrementelle Installation von Apps während der Entwicklung möglich ist, um den Testprozess zu beschleunigen. iOS-Endanwender sollten eine schnellere Animation bei Seitenübergängen finden.

Unter anderem Namen

Wie üblich ist zusammen mit dem Flutter-Release eine neue Version der zugehörigen Programmiersprache Dart erschienen. Die wesentliche Neuerung ist die Einführung der aus anderen Sprachen bekannten Typ-Aliase, die auf Platz zwei der am meisten gefragten Sprachergänzungen standen. Über typedef lässt sich ein womöglich komplexer Typ durch einen einfachen alternativen Namen ersetzen, wie in folgendem Beispiel aus der Ankündigung von Dart 2.13:

typedef Json = Map<String, dynamic>;
class User {
  final String name;
  final int age;
  User.fromJson(Json json) :
    name = json['name'],
    age = json['age'];
  Json get json => {
    'name': name,
    'age': age,
  };
}

Wer Libraries anbietet, kann die Aliase zudem beispielsweise verwenden, um Klassen umzubenennen, aber den alten Namen weiterhin zu erlauben. Wenn zusätzlich der alte Name mit der Annotation @Deprecated als überholt gekennzeichnet ist, finden Entwicklerinnen und Entwickler einen geschmeidigen Übergang zur neuen Schreibweise.

Daneben erweitert Dart 2.13 die Anbindung an C-Code über das Foreign Function Interface (FFI), das nun Structs mit Inline-Arrays direkt über Wrapper umsetzen kann:

// Struct in C:

struct MyStruct {
  uint8_t arr[8];
}

// Zugehöriger Dart-Wrapper:

class StructInlineArray extends Struct {
  @Array(8)
  external Array<Uint8> arr;
}

Auch Packed Structs lassen sich nun in Dart über das FFI direkt einbinden, wofür die Sprache die Annotation @Packed<Alignment> erhält, also beispielsweise @Packed<4> für ein 4 Byte Alignment.

Weitere Neuerungen lassen sich den Ankündigungen von Flutter 2.2 und Dart 2.13 entnehmen. Die SDKs stehen auf den jeweiligen Entwicklungs-Sites zu Dart und Flutter zum Download bereit. Google bietet zudem neuerdings ein Flutter-Plug-in zur Integration von Google Pay in iOS- und Android-Apps. Schließlich ist Dart neuerdings als offizielles Docker-Image auf Docker Hub verfügbar.

(rme)