Cross-platform development: Flutter 2.2 aims for better presentation on the web


Google has released version 2.2 of the cross-platform framework Flutter. The first release since the most recent major version mainly includes adjustments for web applications. In addition, it is increasingly targeting so-called platform-adaptive apps that take into account not only form factors but also input methods.

While Flutter was primarily designed for mobile development for iOS and Android in the early days, version 2.0 stabilized the web as a target platform. The most recent major version came out in March, and version 2.1 didn’t see the light of day, it just is as a preliminary version in the dev channel available. The jumps are quite common at Flutter, so the latest 1.x versions line up as 1.12, 1.17, 1.20 and 1.22.

Downloading and starting Flutter applications on the web has been a bit bumpy up to now: A service worker took care of the download in the background, but users had to manually refresh the page to see the full application – and probably in part even several times. The new service now takes care of updating the page independently.

In order for the new service worker to take effect, developers must update the index page of their project by deleting index.html and the command flutter create . To run.

Cascading Style Sheets (CSS) can now be used for web development Font Features use in the HTML renderer. Flutter offers two different types of rendering process for web applications: The HTML renderer uses a combination of HTML elements, CSS, canvas elements and SVG (Scalable Vector Graphics).

The CanvasKit renderer implements Flutter applications on the web as well as as an app for mobile platforms. It uses WebAssembly and WebGL and provides better performance at runtime, especially for graphics-heavy applications. The price for this is a download size that is around 2 MB higher than that of the HTML renderer. Both rendering types can now use shader masks, and the command computeLineMetrics can be used as well as for mobile apps.

Under the heading of platform-adaptive apps, Flutter aims to take into account not only different form factors from smartphones to tablets to desktops in cross-platform development, but also different input methods such as touchscreen or mouse plus keyboard. In addition, the applications should deal with the platform-specific navigation via the navigation drawer or system menus. There is a in the Flutter documentation Adaptive Apps Guide, from Google’s developer conference I / O 2021, there is a video on the subject.

Kevin Moore covers the use of adaptive apps in the talk on Google I / O.

A lot has also happened with regard to accessibility: Among other things, the team has improved the integration of screen readers and navigation via individual elements. It is also worth mentioning that under iOS it is now possible to install apps incrementally during development in order to accelerate the test process. iOS end users should find faster animation on page transitions.

As usual, a new version of the associated programming language Dart was released together with the Flutter release. The main innovation is the introduction of the type aliases known from other languages, which are in second place in the the most popular language supplements. over typedef a possibly complex type can be replaced by a simple alternative name, as in the following example from the announcement of 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,

Those who offer libraries can also use the aliases, for example, to rename classes, but still allow the old names. If the old name with the annotation @Deprecated is marked as obsolete, developers will find a smooth transition to the new notation.

In addition, Dart 2.13 extends the connection to C code via the Foreign Function Interface (FFI), which can now implement structs with inline arrays directly via wrappers:

// Struct in C:

struct MyStruct {
  uint8_t arr[8];

// Zugehöriger Dart-Wrapper:

class StructInlineArray extends Struct {
  external Array<Uint8> arr;

Packed structures can now also be directly integrated in Dart via the FFI, for which the language is the annotation @Packed<Alignment> receives, for example @Packed<4> for a 4 byte alignment.

Further innovations can be found in the announcements from Flutter 2.2 and Take Dart 2.13. The SDKs are on the respective Development sites about darts and Flutter for download ready. Google also recently started offering a Flutter plug-in for integrating Google Pay in iOS and Android apps. After all, darts is more recently than official Docker image on Docker Hub available.


To home page