Flutter Forward and Flutter 3.7 release summary

On January 25th, a #FlutterForward event took place in Nairobi, Kenya. This was a widely announced event - held by the Flutter team, which introduced changes in the framework and outlined the direction in which Flutter is moving.

This article summarizes the event and describes the newly introduced Flutter features and the current state of Google's Flutter framework. We recommend reading it if you want to stay up-to-date in order to build even better Flutter applications.

I: Flutter Forward - Flutter direction

January’s Flutter event was mainly focused on the direction that Flutter heads in and things that are not here yet. During the event, the Flutter team presented new features that have been introduced to Flutter 3.7. This release also includes numerous improvements to each of the stages of app development (design, implementation, testing, debugging).

We could see an impressive sneak peek of new features that have been in the phase of development. They aren't released in the stable version yet, but we had a foretaste of what Flutter might be capable of in the future. We can group them into 4 categories:

• breakthrough graphics performance,
• embedding Flutter app in a native web page (embedding in a div),
• early to new and emerging architectures (WebAssembly),
• continued focus on developer experience (Dart 3 alpha).

Graphic Source: Flutter Forward Video

One of the most promising demos we saw was the ability to embed the Flutter app within a single div element on the web page. This demo was available thanks to turning on a bunch of experimental flags on Chrome Canary as Experimental WebAssembly, and compiling code just to WebAssembly.

What is important is that when building a Flutter web app, you would put it in an iframe, or it would take the entire screen. Now Flutter apps can be embedded into a single div in a web app and integrated with the rest of the web app. You can try it yourself, go to this page, and experiment a little!

Graphic Source: Flutter Forward Demo Web App

Above, you can see what we have tried out, but after all, we haven't decided to use it. Still, you can subscribe to LeanCode's Newsletter here or on our main page.

Also, the following week after a Flutter Forward event, new videos were uploaded on the Flutter YouTube channel, which explained more about the topics covered during the event.

II: Flutter 3.7 features & announcements

We usually have some breaking news during the Flutter events regarding the new Flutter and Dart versions. The same applies to this case, the Flutter team announced: Flutter version 3.7 + Dart version 2.19.

On this page, you can track the most recent Flutter framework updates. The release notes cover the latest Flutter 3.7 and the previous Flutter 3.3 updates (which we covered in our twin article). Also, they will cover all future updates - so you can check it out after the next release too.

Besides that, Flutter introduced an official roadmap. As on the roadmap, things can change or be rescheduled, and not all of these things are confirmed yet, so treat this page as a list of directions Flutter is going and may reach in the near or distant future.

Let’s go through the most interesting announcements chronologically.

1. Material 3 further rollout

Flutter support for Material 3 moved forward along the new Flutter 3.7 version. We have already described new UI components - in this article - that were added in version 3.3.

Since October 2023 Material 3 demo page has been updated. Now, we can see that many widgets, such as ActionButton and Cards, are more rounded and look like some already known elements from Google pages. We encourage going through it and trying out new components yourself. They can be quickly compared to Material 2 using a Switch to Material 2 button from AppBar on the left.

Graphic Source: Web Material 3 Demo

We remind you that in that popular GitHub issue, we can track the progress of Bringing Material 3 to Flutter. There are 49/65 tasks already closed (on February 7th), and hopefully, we will see full Material You support soon, so the useMaterial3 flag in ThemeData wouldn’t be needed anymore.

2. Background isolate channels

The mention of background isolates may have escaped the viewers’ attention.

As we have described in an article about Background Services in Flutter, mobile apps often need to perform some actions in the background. Additionally, the app has to communicate with native platform services like tracking phones’ location, communicating via Bluetooth, downloading or uploading files, or just performing calculations. The Flutter community is working hard to unify using platforms with Plugins like flutter_local_notifications.

Example: Imagine your fitness app has the following feature: after taking a photo, it upscales its resolution, uploads your bike training route to the server, and displays a notification when the operation completes. Obviously, the app is making heavy computations, and you don’t want it to impact UI performance. On the other hand, the app is making serious live changes on a large 4K image, and you don’t want it to interfere with other simultaneous app processes: like uploading files to the backend, displaying notifications, or using phone location.

Problem: Executing code in a background isolate eventually becomes a thing when the library invokes a callback on a background isolate. Then using a root isolate becomes a problem - a bottleneck - so the framework needs a solution to bypass root isolate. In the example, many processes were used in a background isolate: saving a photo to the camera roll, uploading the file to cloud storage, and displaying a notification. Without the utilization of Background Isolate Channels, the application would be required to transfer a copy of the image from the root isolate to the background isolate, which is currently not possible to perform this operation in a constant time manner using Dart.

Solution: Isolate Background channels

Graphic Source: Platform Isolate Channels Doc

In the example above, after AsyncOperation completes and is executed, a hardcoded hop happened to the platform thread.

Isolate sending a message needs to store be stored somewhere, in order to make Background Isolate Channels work. For this purpose, Dart ports were used, which store isolates that owned them.

The next thing that was left, was associating background isolate with root isolate. To shoot down the platform channel when the Flutter engine is destructed, one must know which background isolates are associated with that engine. Without that connection, background isolates could try to communicate with a Flutter engine that is destroyed.

3. iOS release validation

You can confirm a list of settings to be updated before releasing an iOS app through a checklist, ensuring your app is ready for submission to the App Store. The command futter build ipa will now verify some of these settings and notify you if any modifications need to be done before the release.

Graphic source: Medium

4. New widgets, components and other minor UI updates

One of the significant aspects of Flutter's development is its focus on providing an intuitive and streamlined developer experience. Flutter 3.7 introduces a couple of new widgets and components. It helps app developers build even more custom-tailored apps containing well-known features from native platforms. Here is a list of newly introduced minor features focused more on User Experience.

1. Menu bars, cascading menu.

A new cascading menu in the menu bar allows developers to create an expanded menu. The menu looks similar to the macOS menu bar and is available on all platforms. It’s a useful component when building an e-commerce page, a blog page, or any web page or app with a nested menu structure.

Graphic source: GitHub

Graphic source: own - MacOS

2. Custom context menu

Context menus open, for example, when selecting text on mobile. You can now add custom menu elements like Call when users select a phone number. To change the context menu, use contextMenuBuilder. You can add additional elements to the menu, change the default platform context menu, or make it truly platform-adaptive.

Graphic source: GitHub

Check this example library to see more examples of use.

3. Global Selection improvements

The SelectionArea feature has now been integrated with keyboard selection functionality, allowing you to expand your current selection using keyboard shortcuts such as holding down the shift key while pressing the right arrow.

Gif source: own example built here

4. New Cupertino components: CupertinoListSection, CupertinoListTile

When building a list in Flutter for iOS, we often would like to mimic the look of the native element (for example, when rewriting an existing iOS app to Flutter). Now lists can be quickly built using CupertinoListSection and CupertinoListTile. See more on GitHub.

These are Cupertino versions of Flutter ListView and ListTile classes.

Graphic source: GitHub

Graphic source: GitHub

5. Text magnifier

The magnifying lens that appears when selecting text on Android and iOS can now be utilized in Flutter. This feature is automatically available for all applications with text selection, but if you wish to turn it off or personalize it, refer to the magnifierConfiguration property.

Bonus: Upcoming features not covered during Flutter Forward

1. SLSA
The Software Licensing Supply Arrangement (SLSA) is designed to safeguard software code against potential attacks. SLSA helps to protect against common supply chain attacks that can happen at every link in this chain. Below is a typical software supply chain with examples of attacks on each chain. You can read more about it here.

Graphic source: Google blog

During the development process, you should look at each one of the dependencies as a potential vector of attack. There are multiple levels of compliance. Thanks to Flutter's support, this technology may attain compliance with the SLSA-3 standard this year, and plans to achieve the SLSA-4 standard by next year. You can find more in this Flutter Forward follow-up video covering Software supply chain security for Flutter and its ecosystem.

2. Render content into multiple windows

One of the upcoming features in the development stage is running Flutter in multiple windows on a desktop powered by a single Flutter app instance. That would definitely be useful when presenting Flutter apps on a large screen, with various app instances opened to show a couple of features simultaneously.

The widgets you can see in the demo below are a part of the same unified widget tree.

Graphic source: Flutter Forward video

3. Screenshots on pub.dev

Have you ever found an interesting package on pub.dev but wondered what the widget looks like? Fortunately, Flutter introduced screenshots on pub.dev. You can now add a screenshots section to pubspec.yaml.

Graphic source: Flutter Forward video

After publishing your package, these images appear in the right column as a thumbnail, just above the publisher's name. When you click on an image, it can be previewed in a carousel.

Graphic source: Flutter Forward video

Undoubtedly, it’s a beneficial change, and hopefully, many authors will promptly update their packages.

Summary

Flutter Forward was an interesting conference with a wide range of announcements. Some of them, like the new Material 3 components, showed us the direction Flutter UI is going into. Another update, like background isolates or iOS release validation, will enable way more advanced development and make checking your app pre-release easier.

We wonder how many of the presented sneak peeks of features will be available in 2023. If they release even a part of these features, it will be deemed a successful year for Flutter. Observing the progress of the Flutter team, it is evident that they are working fast, releasing a substantial number of new features just half a year after their previous conference.

With the presence of a strong and supportive developer community, as well as numerous contributors (like, for example, LeanCode's Patrol - Flutter UI testing framework), Flutter will likely continue to evolve.