What’s new in Flutter 3

The recent release of Flutter v3.0 is now stable for macOS and Linux, in addition to Windows!

Ready for production on all desktop platforms

Linux and macOS have reached stable and include the following features:

Cascading menus and support for the macOS system menu bar

You can now create platform-rendered menu bars on macOS using the PlatformMenuBar widget, which supports the insertion of platform-only menus, and control over what appears in the macOS application menus.

Full support for international text input on all desktop platforms

International text input, including for languages that make use of text input method editors (IMEs) such as Chinese, Japanese, and Korean is fully-supported on all three desktop platforms, including third-party input methods such as Sogou and Google Japanese Input.

Accessibility on all desktop platforms

Flutter for Windows, macOS, and Linux supports accessibility services such as screen-readers, accessible navigation, and inverted colors.

Mobile updates

Updates to mobile platforms include the following:

Foldable phone support

The Flutter 3 release supports foldable mobile devices. In a collaboration spearheaded by Microsoft, new features and widgets allow you to create dynamic and delightful experiences on foldable devices.

As part of this work, MediaQuery now contains a list of DisplayFeatures, describing the bounds and states of device elements like hinges, folds, and cutouts. Additionally, the DisplayFeatureSubScreen widget now positions its child widget without overlapping the bounds of DisplayFeatures, and has already been integrated with the framework’s default dialogs and pop-ups, making Flutter aware and responsive to these elements out of the box.

iOS variable refresh rate support

Flutter now supports variable refresh rate on iOS devices with ProMotion displays, including iPhone 13 Pro and iPad Pro. On these devices, Flutter apps can render at refresh rates reaching 120 hz, which were previously limited to 60 hz. This results in a smoother experience during fast animations such as scrolling. See flutter.dev/go/variable-refresh-rate for more details.

Web updates

Updates for web apps include the following:

Image decoding

Flutter web now automatically detects and uses the ImageDecoder API in browsers that support it. As of today, most Chromium-based browsers (Chrome, Edge, Opera, Samsung Browser, and more) have added this API.

The new API decodes images asynchronously off the main thread using the browser’s built-in image codecs. This speeds up image decoding by 2x, and it never blocks the main thread, removing all jank that was previously caused by images.

Web app lifecycles

The new lifecycle API for Flutter web apps gives you the flexibility to control the bootstrap process of your Flutter app from the hosting HTML page, and helps Lighthouse analyze the performance of your app. This applies to many use-cases, including the following frequently requested scenarios:

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

Apps generated in Flutter 3 with flutter create automatically enable the v2.0 sets of lints. Existing apps, packages, and plugins are encouraged to migrate to v2.0 to follow the latest and greatest best practices in the Flutter world, by running flutter pub upgrade –major-versions flutter_lints.

Most of the newly added lint warnings in v2 come with automated fixes. So, after upgrading to the latest package version in your app’s pubspec.yaml file, you can run dart fix —-apply over your code base to fix most lint warnings automatically (some warnings still require some manual work). Apps, packages, or plugins that aren’t using package:flutter_lints yet can migrate by following the migration guide.

Performance improvements

Thanks to open source contributor knopp, partial repaint has been enabled on Android devices that support it. In our local testing this change cut average, 90th percentile, and 99th percentile frame rasterization times on the backdrop_filter_perf benchmark on a Pixel 4 XL device by 5x. Partial repaint when there is a single rectangular dirty region is now enabled on both iOS and newer Android devices.

It has further improved the performance of opacity animations in simple cases. In particular, when an Opacity widget contains only a single rendering primitive, the save layer method that is usually invoked by Opacity is omitted. In a benchmark constructed to measure the benefits of this optimization, rasterization time for this case improved by an order of magnitude.