Flutter 3.3: What’s New?

Flutter is Google’s very own UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter achieves this task using its language called Dart.

Less than 24 hours ago, Flutter Product Manager Tim Sneath announced a new stable version of Flutter i-e; Flutter 3.3. Talking about the numbers, we get to know that since the release of Flutter 3, there have been 5,687 pull requests merged successfully which shows how actively the community is contributing to Flutter’s development.

The new version brings in a lot of features including Performance improvements, Material Design 3, VS Code extension enhancements, and many more. In this article, We’ll go through the major ones. But if you’re interested to know every change in depth, you can read Kevin Jamaul Original article here.

Framework Related Changes:

Global Selection

Using a single sweeping gesture to select elements on a web app is a native feature that was missing from Flutter web apps. But this changes today with the introduction of Flutter 3.3. With the introduction of a new widget called SelectionArea.To make it easier to select elements within our Flutter Web App, simply wrap the Scaffold with the SelectionArea widget and boom. All of its descendants are now selectable. To learn more about the widget, head to the SelectionArea API Documentation.

Trackpad Input

Flutter 3.3 also brings in some changes to the trackpad input. Now the trackpad input provides richer and swift control. Not only that, but it also removes the inconsistencies across the scrolling. To learn more about the trackpad input improvements, you can read the document shared by the Flutter team here.

Scribble

Did you ever want to have Apple Pencil support for input on your iPad in your Flutter Applications? Well, it’s here! Credits goes to one of Flutter Community member Jami Couch . The Scribble feature is enabled by default on Widgets like CupertinoTextField, TextField, and EditableText. All you have to do is to upgrade your Flutter Version to Flutter 3.3.

Text Input

To improve on the Flutter rich text editing, the latest version of Flutter provides the ability to receive granular text updates from *TextInputPlugin. This allows the developers to build an input field with different styled ranges that can expand and contract as the user types. You can see the demo *here.

Material Design 3:

Since the introduction of Android 12 which brought the dynamic theme engine Material You, the whole Android theming system has evolved. With more and more development in the Android OS, newer iterations of Material Design are integrated into it. And Flutter takes no time to catch up with those updates. With Flutter 3.3, there have been changes to the Material Design of widgets like IconButton, Chip, and variants of AppBar.

Gradually more and more widgets are getting migrated to Material Design 3 theming. You can check out the progress on Material 3 Github.

Below are the screenshots of the new Material Design adaptive widgets:

IconButton:

Chip:

AppBar:

Flutter For Desktop:

Windows

Before the release of Flutter 3.3, if you wanted to set the version of your Desktop Application based on Flutter, you had to change it from a file that was specific to Windows Application. That changes today with the update that makes it easier to change the app versions from the project’s pubspec.yaml
This makes it more consistent with how other platform versions are set. To learn more about this feature and more, head over to Flutter Docs.

Impeller: The Next-Generation Rendering Layer

If you’ve been following Flutter since its beta days, I’m sure you’ve heard of Skia Graphics Engine. The Graphics engine powered all of the Flutter itself and made it capable enough to perform as good as it does.

With the release of Flutter 3.3, The Flutter Team announced a new rendering layer called Impeller; A runtime that is capable of getting the full potential out of hardware-accelerated API’s such as Metal for iOS and Vulkan for Android.

With the introduction of a new graphics engine, you can expect even silkier animation across your Flutter applications. It will raise a bar of expectations for a cross-platform tool kit. Impeller also doesn’t need runtime shader compilation which is the main source of frame time janks in our apps.

As of now, the feature is under active development, you can try your hands on the latest Graphics Engine capabilities by switching to *master *channel of Flutter so to make sure you are running the latest version of Flutter.

Packages:

go_router Package

With the latest and greatest updates, Flutter keeps getting stable updates across different platforms including mobile, desktop, and the web. With more updates come more complexities. One big complexity is that of Navigation. In the case of complex navigations, we often find ourselves scratching our heads but things just got a little easier with the introduction of the go_router package. The package is being managed by the Flutter Team themselves. The packages make it easier by providing a declarative, URL-based API which makes it easier to navigate and handle the deep links. You can learn more about Navigation and Routing here.

VSCode Extension Improvements

We can all agree on the fact that Dart: Add Dependency VS Code Extension has made it very easy to add third-party packages to our project. Well, that has just gone one level up with now support to add multiple packages all at the same time by separating the packages name with a comma.