Google I/O 2023: Flutter Levels Up to Version 3.10

If there are two words that summarize the Google I/O keynote, it would be “artificial intelligence” or “machine learning”. Thankfully, the words “Flutter developer” were mentioned, too, although the framework didn’t receive much attention on the center stage. The release of Flutter 3.10 instead of the expected Flutter 4.0 indicates that something seems amiss. But as writer/poet/aspiring Flutter developer Gertrude Stein once wrote, a release version number is a release version number is a release version number.

So regardless of whether the release number reads 3.10 or 4.0, we still got a whole lot of new features in the framework, in the rendering engine and even on the web. Better still, the Dart programming language has upgraded to version 3.0, providing us with additional features such as null safety by default, records, patterns and class modifiers. Needless to say, with this Google I/O, Flutter developers have a lot of new tools to play with! And here are some of the most exciting.

Taking the Impeller Engine for a Drive

With Flutter version 3.10, we finally get our hands on the Impeller rendering engine. Before version 3.10, Flutter used the Skia rendering engine. This is a general-purpose renderer used in a variety of apps like Firefox, Chrome and Libre Office. Unfortunately, this engine produced noticeable stuttering in animations because it compiles shaders during runtime. This stutter is affectionately known as jank.

Instead of fixing the jank problem in Skia, the Flutter team chose to develop their own rendering engine, Impeller. This is a rendering engine specially designed for Flutter. It avoids shader compilation jank by using a variety of tactics to create smooth animations.

The Flutter Team specifically built it as a drop-in replacement for Skia, so to use it in your app, just compile your app using 3.10. That’s all it takes to get an easy performance boost!

Null Safety

At long last, Dart has left the terrible twos (which weren’t so terrible) and moved on to version three. The biggest difference is that Dart now has null safety on by default. From now on, if you want to use null values, you have to declare your variables as nullable, like so:

String? firstName = null;

If you’ve been following our articles, you’re already familiar with this practice. By declaring variables as null, you’re forced to work with potential null values. It’s a safe approach when working with null values. Prior versions of Dart made this an opt-in approach. With Dart 3.0, it’s now required.

Null safety doesn’t stop with your code. If you are using packages that don’t use null safety, your app will not compile. Welcome to null safety jail. To get out of null safety jail, you’ll need to include a null-safe version of that package. Thankfully, the vast majority of packages served on pub.dev adhere to sound null safety practices. These packages are annotated with the “Dart 3 Compatible” label.

If you aren’t using null safety practices, there’s a Migrating to Null Safety Guide to help you through these pain points. If you need to review null safety techniques, we have you covered in our course, Dart Null Safety in Flutter.

Records and Switches, Oh My!

Dart 3 also provided us with a couple of cool new language features. The first is called Records. Records enable us to encapsulate multiple values in a simple object. This makes it incredibly easy to return multiple values from a function without having to define additional classes. Records are very much like tuples, except the returned values are unordered and recognized by name.

Here’s an example of creating a simple record:

var wizard = (name: "Gandalf", favoriteColor: "grey", hasBeard: true);
print(wizard.name); // prints Gandalf

As mentioned, records work well with functions; you simply declare the return types as part of the function signature and return a record.

(String, String, bool) getWizard() {
    return ("Gandalf", "grey", true);
}

To access records, unwrap them into separate variables using a language feature known as patterns. If you’re coming from a language like Swift, you should be very familiar with this:

var (name, _, hasBeard) = getWizard();
print(name); // prints Gandalf

In this case, you unwrap two variables and store them in variables of your naming. You ignore the favoriteColor variable by using an underscore for the name.

Patterns also inspired the Dart team to use them in the switch statement. For starters, switch statements no longer need to use the break keyword to prevent accidental fallthrough. Next, we can now use logical operators inside of our cases:

switch (name) {
    case 'Gandalf' || 'Saruman':
        print("Tolkein");
    case 'Harry' && 'Hermonie' && 'Ron':
        print("Rowling");
    default:
        print("Gygax");
}

Using the arrow syntax, you can condense the switch to a single expression:

var name = switch(name) {
    'Gandalf' || 'Saruman' => 'Tolkein',
    'Harry' && 'Hermonie' && 'Ron' => 'Rowling',
    _ => 'Gygax'
};

There’s a lot more about this language feature, so definitely review the official documentation for all the options available to you.

Other Features

Flutter 3.10 includes many other features in addition to the new rendering engine and Dart updates. For one thing, the Flutter Team is continuing to build support for Material You, Google’s latest design language. There are lots of updated components such as the NavigationBar, SearchBar, and various pickers. If you’re interested in seeing all the various user interface updates, read “What’s new in Flutter 3.10” by the Flutter Team’s Kevin Chisholm.

Along with user interface updates, there’s a strong emphasis on optimizing web performance. Flutter web products can now compile to Web Assembly (WASM), which aims to execute code at native speed. WASM is an open-source framework shipped on all major browsers. Along with lightning-fast updates, Flutter 3.10 provides an API for your code to communicate with native JavaScript in a statically typed and safe manner. Finally, the Flutter Team has made great strides in allowing you to embed your Flutter web app in existing web apps.

That said, there’s much more to explore! We recommend diving into the release notes, opening your IDE and starting to experiment with Flutter’s new features.