May 2023: Flutter 3.10, Dart 3.0, and Google I/O Highlights

What a month this has been for Flutter!

With the release of Flutter 3.10 and Dart 3.0 during Google I/O, there’s a lot to cover.

And in addition to all the official announcements, there are some exciting community updates too.

So read on to get my full recap!

Flutter 3.10 Release

Flutter 3.10 is a big release, bringing many graphics, security, and performance improvements to all supported platforms.

It ships with many improved Material 3 widgets, including new navigation and search bars, date and time pickers, and more.

And performance-wise, Impeller is now production-ready on iOS, and great strides have been made to improve the app startup time on Flutter web.

For all the details, check out the official announcement:

🎯 Dart 3.0 Release

Dart 3 is the largest Dart release to date, bringing major new language features such as records, patterns, and class modifiers.

Dart 3 also marks the completion of the journey to 100% sound null safety.

Some additional language features are coming, too, along with work on many other fronts, including Dart to WASM compilation (more on this below).

For a good overview, read the official announcement:

And if you want to learn more about the new language features, the official docs will help you get started:

📹 What’s new in Dart and Flutter

For a great overview of what’s new in Dart and Flutter, don’t miss this video:

This covers all the most important stuff, along with these additional topics:

  • Fragment shaders on web
  • Wide gamut images on iOS
  • Dart & JS interoperability
  • Dev tools improvements
  • Preliminary WASM support

And if you’re focusing your efforts on iOS or Windows, there are more goodies for you. 👇

📝 The Future of iOS Development with Flutter

The iOS platform received a lot of attention in the latest release.

As a result, you can now debug your iOS apps over Wi-Fi, and the official docs include many new and updated guides for iOS:

For all the details, check this blog post:

📝 Introducing Dart | Windows

If you’re using Flutter to build desktop apps, you can’t ignore the fact that Microsoft Windows is the leading OS (with a 63% market share).

And if you look on pub.dev, you can find Dart | Windows, a growing suite of packages that helps you do more with the Windows APIs.

For a good introduction to this topic, check out this article and the additional resources by the Flutter team:

Google I/O Highlights

The Flutter team published an entire playlist as part of Google I/O, covering the most important advancements:

And on the Google I/O website, you can find all the new technical sessions and codelabs:

Here are my top picks. 👇

📹 Evolving Flutter's support for the web

Since Flutter web was first announced, the number of web apps powered by Flutter has continued to rise.

But to this day, creating Flutter web apps that load fast and run smoothly is still a big challenge, and much work needs to be done before Flutter can bridge the gap with regular web apps.

The good news is that with the latest 3.10 release, the Flutter team reduced the size of CanvasKit and the fonts that are loaded during app startup, resulting in a 40% faster load time.

Support for element embedding has also been improved, making it easier to integrate a Flutter app into any HTML element.

Beyond that, preliminary support for WebAssembly has been announced, and it’s now possible to run Flutter shaders on the web.

This video covers all the details:

If you’re using Flutter on the web, there are things you can do to improve the user’s experience on app startup. For example, you may want to display a (CSS-based) progress indicator until the main Flutter app is loaded. And this updated guide shows you how: Customizing web app initialization

📹 Introducing Impeller - Flutter's new rendering engine

If you have ever wondered how Flutter transforms widgets into pixels that can be rendered on the GPU, you need to learn how its rendering engine works.

And this video offers a great overview of how Impeller works and how it delivers great performance by eliminating shader compilation jank and reducing the app startup time:

📹 How to build next-gen UIs in Flutter

Writing custom shaders is your best bet if you want to create custom graphics effects that can’t be achieved with regular widgets and custom painters alone.

And in this new video, Craig Labenz takes you through all the required steps:

And if you want, you can follow all the steps in the video with this new codelab:

Other Flutter News And Resources

We’ve covered a lot already, but we’re not done yet, and I have a few more resources to share. 👇

📝 Mastering Dart & Flutter DevTools

If you want your app to provide a great user experience, there are many things to consider, including performance, app size, responsiveness, memory, CPU & network data usage, and much more.

And to measure all these metrics, you can use a powerful suite of tools known as the DevTools.

The official docs already cover the basics. But if you want to become a pro with the DevTools, don’t miss this 8-part series by Ashita Prasad:

📝 Dart Edge with Supabase

The folks at Invertase have been working on Dart Edge, a new project aimed at running Dart code on Edge functions using Supabase.

If you want to take Supabase for a spin as a Dart backend, check this out:

📹 Animated Splash Screen Coordination

Adding an animated splash screen to your Flutter app is a great way to wow your users and leave a good first impression.

And in this video, Randal Schwartz shows a cool little trick that uses animations and future completers. Very neat!

And if you want add a native splash screen to your Flutter app, check out this package:

📝 Records and Pattern Matching in Dart

The new language features in Dart 3 have received a lot of praise, and the community has already contributed with some good articles.

If you wanna dive deeper, check them out:

Latest from Code with Andrea

Since the last edition, I’ve published two new articles, launched my Flutter & Firebase Masterclass, and updated my Flutter Foundations course to Flutter 3.10. 👇

📝 How to use Abstraction and the Repository Pattern Effectively in your Flutter apps

If your Flutter app talks to a backend or some server-side APIs, you’ll want to have a good separation of concerns between the UI code and your data-access layer.

To do this, you can use the repository pattern and some other abstractions.

But while some abstractions can make your code more testable, scalable, and maintainable, others are overkill and can do more harm than good.

And in this article, I cover all the details:

📝 What’s New in Dart 3: Introduction

Having played with the new Dart 3 features over the last week, I couldn’t resist writing about them.

So I’ve decided to write a new series of articles showing how to use each feature in detail, along with examples and practical use cases you may encounter in the real world.

And here’s the first one:

🔥 Flutter Foundations course update (25% off)

As soon as Flutter 3.10 was released, I got to work and updated my Flutter Foundations course to the latest APIs and packages.

To celebrate this, I’m offering a 25% discount, which will be valid for a limited time until the 26th of May.

If you want to take advantage of this, check it out here:

👉 Flutter Foundations Course - 25% off

Until Next time

Back in my early days as an iOS developer, I always viewed new releases with a mix of excitement and apprehension, wondering how much of my code was going to break. 😱

But since I switched to Flutter, my worries are gone and I’m thankful that upgrading old projects is mostly a case of running dart fix --apply. 😀

Moreover, some official packages are also making automatic migrations easier, and I hope this trend will continue. So I’m very grateful that the Flutter team goes to great lengths to make our life easier. 🙂

And I hope you feel that way too. 😉

Happy coding!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.