Look at I/O together | Flutter 3 update details

By Kevin Jamaul Chisholm, Technical Program Manager for Dart and Flutter at Google

It's Flutter stable release time again, and we're incredibly proud to announce Flutter 3 ! Only 3 months ago we announced Flutter support for Windows . Now, we are again excited to announce that, after Windows, Flutter now supports macOS and Linux!

We've merged a total of 5,248 PRs, thanks to all the hard work of Flutter contributors!

Exciting upgrades in this release include: updated Flutter support for macOS and Linux, significant performance improvements, updates for mobile and web, and many other features! Additionally, we're bringing news about dropping support for older versions of Windows, as well as several breaking changes. Let's get straight to the point!

Full desktop platform production ready

Support for the Linux and macOS platforms has entered a stable state with the following features:

Cascading menus and macOS system menu bar support

You can now use the PlatformMenuBar widget to create platform-rendered menu bars on macOS, support the insertion of menus limited to that platform, and control what appears in the macOS app menu.

△ Cascade menu indication

Full support for multi-national text input on all desktop platforms

All three desktop platforms fully support multi-country text input, including languages using text input method editors (IMEs) such as Chinese, Japanese, and Korean. It also supports third-party input methods, such as Sogou, Google Japanese Input, etc.

Full desktop platform accessibility services

Flutter supports accessibility services for Windows, macOS, and Linux platforms, including on-screen text reading, accessible navigation, and color inversion.

Universal binaries are used by default on the macOS platform

In Flutter 3, the Flutter macOS desktop app is built as a universal binary to natively support Macs with Intel processors and new devices with Apple Silicon.

Development with Windows 7/8 is no longer supported

This release elevates the recommended Windows development build to Windows 10. While we do not prohibit development with older versions (Windows 7, Windows 8, Windows 8.1), we will only provide limited testing against these older versions as they are no longer supported by Microsoft . Although we do our best to support older versions, it is recommended that you upgrade your version.

Note: Flutter apps can still be run on Windows 7 and 8, this change only affects our recommended development environment.

Mobile update

Our mobile updates include:

Support for foldable devices

Flutter 3 supports foldable mobile devices. Through a Microsoft-led partnership, we're empowering everyone to create dynamic, delightful experiences on foldable devices with new features and widgets.

As part of the collaboration, MediaQuery now includes a list of DisplayFeatures that describe device component states, including hinges, folded states, and screen notch. Additionally, the position of the subwidgets contained in the DisplayFeatureSubScreen widget now does not overlap the bounds of DisplayFeature and has been used for the frame's default dialogs and popups, making Flutter dynamically adapt to the positions of these elements by default.

Many thanks to the Microsoft team. Also, a special thanks to @andreidiaconu for his contributions!

You are welcome to try the Surface Duo emulator example , which includes a special derivative of the Flutter Gallery to see how Flutter actually works on dual screens:

Supports iOS variable refresh rate

Flutter now supports variable refresh rates on iOS devices with ProMotion displays, including the iPhone 13 Pro and iPad Pro. Flutter apps can be rendered at a refresh rate of up to 120 Hz on these devices, up from 60 Hz previously, which makes for a smoother look and feel for fast animations like scrolling. Please check the official documentation for details.

Simplify iOS publishing

We've added new options to the flutter build ipa command to make iOS app distribution easier. When you're ready to distribute to TestFlight or the App Store, run flutter build ipa to build the Xcode archive (.xcarchive file) and app bundle (.ipa file). You can choose to add the --export-method ad-hoc, --export-method development, or --export-method enterprise options. Once the app package is built, it can be uploaded to Apple via the Apple Transport macOS app , or from the command line using xcrun altool (run man altool for App Store Connect API key verification instructions). Once the upload is complete, your app can be published to TestFlight or the App Store . After you complete the initial Xcode project setup such as your app display name, app icon, etc., you don't need to open Xcode when you publish your app.

Gradle version update

When creating a new project with the Flutter tools, you may have noticed that the generated files now use the latest version of Gradle and the Android Gradle plugin. For existing projects, you need to manually upgrade the Gradle version to 7.4 and the Android Gradle plugin version to 7.1.2.

Stop updating 32-bit iOS/iOS 9/iOS 10

According to the February 2022 2.10 stable release announcement, Flutter's support for 32-bit iOS devices and iOS 9 and 10 is coming to an end. This change affects iPhone 4S, iPhone 5, iPhone 5C, and iPad 2nd, 3rd, and 4th generation devices. Flutter 3 is the last stable release to support the aforementioned iOS versions and devices.

For more information on this change, see RFC: End of Support for 32-bit iOS Devices .

Web side update

Our updates for the web include:

image decoding

Flutter web can now automatically detect and use the ImageDecoder API when supported by the browser. This API has been added to most Chrome-based browsers so far, such as Chrome, Edge, Opera, Samsung Browser, etc.

This new API uses the browser's built-in image codec to decode images asynchronously off the main thread. This enables 2x faster image decoding without blocking the main thread at all, eliminating all previous stuttering caused by images.

The life cycle of a web application

The new lifecycle API for Flutter web apps increases flexibility, enables bootstrap control of your Flutter app from a hosted HTML page, and enables the use of Lighthouse to analyze your app's performance. This applies to many use cases, including the following scenarios that are often mentioned by developers:

• splash screen.
• Loading indicator.
• A plain HTML interactive loading page displayed before the Flutter app.

Please read the official documentation " Custom web application initialization " for details.

Tool update

Our updates for Flutter and Dart tooling include:

Lint package update

Lint package version 2.0 is now available:

• Flutter
• Dart

Flutter 3 apps built with flutter create will automatically enable version 2.0 of the Lint suite. We recommend that you run flutter pub upgrade --major-versions flutter_lints to migrate existing apps, packages, and plugins to version 2.0 to follow Flutter's latest and greatest best practices.

Most of the warnings new in Lint version 2.0 come with automatic fixes. So, when you upgrade to the latest package version in your app's pubspec.yaml , you can run it in your codebase dart fix --apply automatically fixes most Lint warnings (some warnings are still partially manual operate). For applications, packages or plugins that have not yet used package:flutter_lints , developers are advised to migrate to the latest version according to themigration guide .

performance boost

Thanks to open source contributor knopp , partial repainting has been implemented on Android devices that support this feature. In our local tests, this feature reduced the average, 90th percentile, and 99th percentile values of frame rasterization times by a factor of 5 on Pixel 4XL devices according to the backdrop_filter_perf benchmark . Partial repainting when a single rectangular dirty region occurs is now implemented on iOS devices and newer versions of Android devices.

We have further improved the performance of opacity animations for simple use cases. Specifically, when the Opacity widget contains only a single rendering primitive, the saveLayer method normally called by the Opacity widget can be omitted. In benchmarks built for this optimization, the rasterization time under this use case improved by an order of magnitude . In future releases, we plan to apply this optimization to more scenarios.

Thanks to the efforts of open source contributor JsouLiang , the engine's raster and UI threads have run priority on Android and iOS higher than other threads (such as Dart VM's background garbage collection thread). In our benchmarks, this resulted in a ~20% speedup in frame build average time.

Prior to the release of version 3, the admission policy for raster caches only looked at the number of draw operators in the picture (assuming that any picture with more than one operator should go into the cache). But this causes the engine to consume memory to cache images that render extremely fast. This release introduces a new mechanism for estimating the complexity of image rendering based on the cost of the included draw operators. In our performance tests, using the new mechanism as the raster cache admission strategy reduced memory usage without degrading performance.

Thanks to open source contributor ColdPaleLight , who fixed a small number of animation frame drops on iOS due to a frame scheduling bug . Thanks to everyone who reported this issue and provided reproducible video with dropped frames.

Impeller

We've been working on addressing early stuttering issues on iOS and other platforms. In Flutter 3, you can preview an experimental rendering backend called Impeller on iOS. Impeller precompiles a smaller, simpler set of shaders at engine build time to avoid compiling at app runtime, which is a major cause of Flutter lag. Impeller isn't ready for production, and it's still some way off. Impeller has yet to implement all of Flutter's features, but we're happy with the fidelity and performance it achieved in flutter/gallery apps, and are happy to share the development progress here. In particular, even the worst frame rate in the Gallery app's cutscenes was about 20 times faster than before.

Impeller is available on iOS with markers.如果您要试用Impeller， --enable-impeller标记至flutter run ， Info.plist文件中的FLTEnableImpeller标记为true . Impeller development continues on the main Flutter channel, and we hope to provide further updates in future releases.

Inline Ads on Android

When using the google_mobile_ads package, you should see improved performance for key user interactions such as scrolling and switching between pages. This performance boost is especially noticeable on devices that are popular in emerging markets. Best of all, you don't need to change any code!

In terms of implementation, Flutter now composes Android views asynchronously (aka platform views as they are commonly called). This means that Flutter's raster thread doesn't have to wait for the Android view to render. Now, the Flutter engine uses the OpenGL texture it manages to display the view on the screen.

More exciting updates

Our other updates to the Flutter ecosystem include:

Material 3

Flutter 3 supports a new generation of Material Design, Material Design 3 . Flutter 3 offers optional support from Material 3, including Material You features like dynamic colors, the latest color system and fonts, and updates to many components, as well as new visuals like the new touch ripple design and stretch scrolling introduced in Android 12 . We welcome you all to try out the features of Material 3 with the new " Bringing boring Flutter apps to life " Codelab. Please refer to the API documentation for details on how to opt in to these new features and which components support Material 3. Also keep an eye on the Material 3 Umbrella issue for the latest developments.

theme extension

With the help of "Theme extension", Flutter now supports adding anything to ThemeData in the Material library. ThemeData.extensions ，而无需(在Dart 中) 扩展ThemeData copyWith 、 lerp其他方法。 In addition, package developers can also provide ThemeExtension . See the official documentation for details, and see related examples on GitHub.

advertise

We know it's important for publishers to ask users for consent to personalize ads, and to address Apple's "App Tracking Transparency (ATT)" requirements.

To support these needs, Google provides the "User Messaging Platform (UMP)" SDK, which replaces the previous open source Consent SDK . In an upcoming release of the Google Mobile Ads SDK (Flutter), we will be adding support for the UMP (User Messaging Platform) SDK, which enables publishers to ask for user consent. See the google_mobile_ads package page on pub.dev for more details.

major changes

As we continue to expand and improve Flutter, we try to keep the number of breaking changes to a minimum. Flutter 3 includes the following breaking changes:

• Deprecated APIs removed after version 2.10
• Switching pages to use ZoomPageTransitionsBuilder
• Chips' useDeleteButtonTooltip migrated to deleteButtonTooltipMessage

If you're using the above API, see the migration guide on Flutter.dev.

Summarize

According to statistics from analysts such as Statista and SlashData, Flutter is still the most popular cross-platform interface toolkit, and we can maintain this position because of the contribution of the community. For this, the Google Flutter team would like to express our sincere respect. Looking forward to working with you community members to continue to provide community-driven tools to help you create more enjoyable experiences for your users!