What’s new in Flutter 3.3

Exciting updates for text handling, performance improvements, and more!

Kevin Jamaul Chisholm

September 6, 2022

12

min read

Welcome to Flutter 3.3! Only three months ago we announced Flutter 3, a massive milestone that included stable support for all platforms! The good news is that the momentum since this major release has not slowed down. Since the release of Flutter 3, Flutter has merged 5,687 pull requests.

This release brings updates to Flutter web, desktop, text handling improvements in performance — and much more!

We are also introducing exciting updates to the go_router package, DevTools, and VS Code extensions. Keep reading to learn more.

Framework

Global Selection

Until now, Flutter web apps didn’t match the expected behavior when attempting to select text. Like Flutter apps, native web applications are composed of a tree of elements. In a traditional web app, you can select multiple web elements with a single sweeping gesture, something that couldn’t be easily done on a Flutter web app.

Today that all changes! With the introduction of the SelectableArea widget, any child of the SelectableArea widget has selection enabled for free!

To take advantage of this powerful new feature, simply wrap your route body (such as the Scaffold) with the SelectionArea widget and let Flutter do the rest.

For a more comprehensive deep dive into this awesome new feature, please visit the SelectableArea API page.

Trackpad input

Flutter 3.3 provides improved support for trackpad input. This not only provides richer and smoother control, but also reduces misinterpretation in certain cases. For an example of this misinterpretation, check out the Drag a UI element page in the Flutter cookbook. Scroll to the bottom of the page to get to the DartPad instance, and perform the following steps:

  1. Size the window smaller so that the upper part presents a scrollbar
  2. Hover over the upper part
  3. Use a trackpad to scroll
  4. Prior to installing Flutter 3.3, scrolling on a trackpad drags the item because Flutter was dispatching emulated general events
  5. After installing Flutter 3.3, scrolling on a trackpad correctly scrolls the list because Flutter is delivering the “scrolling” gesture, which isn’t recognized by the cards, but is recognized by the scroll view

For more information, see the Flutter Trackpad Gesture design doc, and the following PRs on GitHub:

Scribble

Thanks to the amazing contributions of community member fbcouch, Flutter now supports Scribble handwriting input using the Apple Pencil on iPadOS. This feature is enabled by default on CupertinoTextField, TextField, and EditableText. To enable this feature for your end users, simply upgrade to Flutter 3.3.

Text input

To improve support for rich text editing, this release introduces the ability to receive granular text updates from the platform’s TextInputPlugin. Previously, the TextInputClient only delivered the new editing state with no delta between the old and new, TextEditingDeltas and the DeltaTextInputClient fill this information gap. Having access to these deltas allows you to build an input field with styled ranges that expand and contract as you type. To learn more, check out the Rich Text Editor demo.

Material Design 3

The Flutter team continues to migrate more Material Design 3 components to Flutter. This release includes updates to IconButton, Chips, and large and medium variants for AppBar.

To monitor the progress on the Material Design 3 migration, check out Bring Material 3 to Flutter on GitHub.

IconButton

Chip

Windows

Previously, the Windows desktop application’s version was set by a file specific to the Windows application. This behavior was inconsistent with the way other platforms set their versions.

Windows desktop application versions can now be set from your projects pubspec.yaml file and build arguments. This makes it easier to enable auto updates for your end customers to get the latest and greatest when an application update is pushed.

For more information on setting your applications version, follow the documentation on docs.flutter.dev and the migration guide. Projects created before Flutter 3.3 need to be updated to get this feature.

Packages

go_router

When designing apps with complex navigation needs, things can get pretty hard to wrap your head around. To extend Flutter’s native navigation API, the team has published a new version of the go_router package, making it simpler to design routing logic that works across mobile, desktop, and the web.

The go router package, maintained by the Flutter team, simplifies routing by providing a declarative, url-based API, making it easier to navigate and handle deep-links. The latest version (4.3) enables apps to redirect using asynchronous code, and includes other breaking changes described in the migration guide.

For more information, check out the Navigation and routing page on docs.flutter.dev.

VS Code extension enhancements

The Visual Studio Code extension for Flutter has several updates including improvements for adding dependencies. You can now add multiple, comma-separated dependencies in one step using Dart: Add Dependency.