November 2023: Flutter 3.16 Debuts with Material 3, Dart 3.2, WasmGC, and more

Flutter 3.16! Material 3! Dart 3.2! WasmGC support in Chrome and Firefox! 🔥

In the last few weeks alone, so many interesting announcements have been made in the Flutterverse. And I'm here, as always, ready to deliver the freshest Flutter news and updates!

So, let’s dive in with my latest Flutter newsletter! 👇

What’s new in Flutter 3.16

As of Flutter 3.16, Material 3 is now enabled by default, giving your apps a fresh look right out of the gate. If this doesn't suit your style, set useMaterial3: false in your ThemeData to opt-out. Curious how all the widgets look in Material 3 vs Material 2? Take a peek at the Material 3 demo.

The latest release also brings:

  • Enhanced iOS features (such as additional edit menu options and improved support for app extensions)
  • SelectionArea improvements
  • Improved 2D scrolling widgets
  • Impeller Preview for Android
  • Mouse scroll wheel and predictive back navigation on Android
  • DevTools updates and extensions for package authors

For all the details, check the official announcement:

A follow-up post is also available, detailing Google's own Flutter adoption for powerhouse apps like YouTube Create and Google Earth:

Dart 3.2 and Material 3 WasmGC Demo

Dart 3.2 is a minor release that brings non-null type promotion for private final fields, new code analysis options, and interoperability improvements with other languages.

Get the full scoop here:

But what I’m most excited about is the advancement in Dart web and Wasm support.

Showcasing this progress is the Material 3 WasmGC preview demo (Chrome 119 or Firefox 120 required). It loads quickly and feels snappy, outdoing many heavyweight apps with a Lighthouse score of 79!

Material 3 WasmGC preview demo with a Lighthouse score of 79
Material 3 WasmGC preview demo with a Lighthouse score of 79

However, note that Wasm support remains limited and only works with simple Flutter apps that don’t rely on dart:html (which is used by most Flutter web packages).

Nevertheless, I’m very excited about the future of Flutter web, and I feel we’re just one or two stable releases away from something really good!

Videos from the Flutter & Firebase teams

While the news above take the spotlight, I have not forgotten to check on YouTube. 🙂

📹 2D Scrolling - Flutter Build Show

If you need to scroll content diagonally, like in this cool 2D grid demo, the new 2D scrolling APIs are your friend.

These APIs were first announced during Flutter Forward and have been available since Flutter 3.13.

And in the latest Flutter Build Show, Kate Lovett explains how these APIs work, how they differ from 1D scrolling (no slivers! 😱), and how to build a custom 2D grid widget using custom Render Objects:

What’s more - the two_dimensional_scrollables package offers a TableView widget that is built with these core APIs.

📹 Firebase supports Sum and Average in Cloud Firestore

The Firebase team keeps rolling out new features, including support for Sum and Average operations in Cloud Firestore via aggregation queries, as of October 2023.

As I write this, these features are only available in the Firebase JS SDK, but Dart support should follow shortly.

Watch this video to learn how they work:

Articles from the Flutter community

Here are the top three articles that caught my eye this month. 👇

📝 State Restoration in Flutter: Practical and Comprehensive Guide

Picture this: you spend two minutes filling out a long form, then a phone call pushes your app to the background. When you return, all the progress is lost because the app has been terminated by the OS. Pretty frustrating, right?

To avoid this kind of scenario, you need to add state restoration to your app.

But how does state restoration work? What widgets and classes do you need to configure? How is it related to routing, scrolling, and animations?

To learn about this (and a lot more), check this in-depth article by Didier Boelens:

📝 How to Test Native Features in Flutter Apps with Patrol and Codemagic

Patrol is a new testing framework for Flutter that first came on my radar in the July newsletter.

Patrol steps beyond conventional widget tests, giving you a way to interact with native platform features—think permission dialogs, alerts, and notifications.

Discover how to write tests using Patrol and integrate them into your CI/CD pipeline with Codemagic in this blog post:

📝 Building Responsive UIs in Flutter: A Short Guide

If your Flutter app targets various form factors (mobile, tablet, desktop), you’ll want to make it responsive and ensure it handles orientation changes gracefully.

To achieve this, you can use built-in widgets such as MediaQuery or LayoutBuilder, and define different layout breakpoints that determine how your app looks as you resize your window.

And in this short guide, you can learn about the basics:

Latest from Code with Andrea

Since my last newsletter, I’ve written one new article, and after nearly 10 months of dedicated effort (🤯), I’ve completed my Flutter & Firebase course!

📝 8 Steps to Follow When Building Your Next Flutter App

When starting a new Flutter app, there are many things to consider:

  • How do you flesh out the requirements and decide which features to build?
  • How will the design and development process unfold?
  • Which technical aspects need to be addressed upfront so you can save time later?

Sure - you could dive into the code and brush these questions aside. But in my experience, this is not the best course of action. So in this article, I offer some guidance for developers in small teams that lack clear processes and conventions:

🔥 My Flutter & Firebase course is now complete

Since January, I poured over 600 hours into my Flutter & Firebase course. So I’m very happy to announce that the course is now complete - and updated to Flutter 3.16 too!

But wait, there's more.

🎁 My Black Friday Sale is on

All my courses are currently on sale with a 50% discount.

This is unlike anything I’ve done before, and you won’t get an offer as good as this until Black Friday 2024.

What’s more - you can get my courses as a single bundle or individually.

For all the details, check the full offer. 👇

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.