August 2024: Flutter 3.24 Highlights, Flutter vs RN Benchmarks, HTTP Clients Deep Dive

What do February, May, August, and November have in common?

Of course, they’re all Flutter release months! 🚀

Like clockwork, the Flutter 3.24 release landed earlier this month, packed with a ton of new features and improvements.

And in this newsletter, I’ll unpick some of the most valuable additions, along with the latest articles and packages from the community!

Announcing Flutter 3.24 and Dart 3.5

Highlights from the latest releases include:

More highlights are included in the official announcement:

As usual, technical blog posts are available for each Flutter and Dart release. 👇

📝 What’s new in Flutter 3.24

Flutter 3.24 ships with new sliver widgets, an improved CupertinoActionSheet, and brand new TreeView and CarouselView widgets.

The DevTools have also improved, introducing a new Rebuild Stats feature to check if a widget rebuilds too often.

On the web front, multi-view embedding is now supported, allowing you to render multiple Flutter web views and manage them with JavaScript inside a single HTML page.

Video ad monetization support has also been added, thanks to the interactive_media_ads package.

Read on for all the details:

📝 Announcing Dart 3.5, and an update on the Dart roadmap

Dart 3.5 is a small release, focusing on compilation to WebAssembly with the new Dart to JS interop model, as well as improvements to native interoperability with C, Java, Kotlin, Objective-C, and Swift.

The pub unpack command is a very welcome addition, making it easy to download a package locally and explore its source code.

As previously announced, the Dart team continues to focus on Dart macros, the biggest feature in the Dart language funnel.

For all the remaining details, read:

Flutter Videos

This month, I’d like to share two new videos from the Flutter team.

📹 Completers (Technique of the Week)

Dart can handle most asynchronous operations with futures and streams. But if you need more advanced control, you can produce a Future and programmatically resolve it at a later time using a so-called completer.

To learn how to use this in practice, watch this short video:

For a more detailed overview about completers, read this article by Didier Boelens:

📹 Mix (Package of the Week)

If you want to build and style your UIs without dealing with the complexity of Material Design, Mix may be the right package for you.

Mix works by wrapping core Flutter widgets, making it compatible with existing Flutter apps, and it can be used interchangeably with the core Flutter widgets.

With Mix, you can also generate style specifications, build themes with design tokens, and animate changing values. To learn more, watch this video:

If you want to take things further, this article by Dinko Marinac offers an overview of Mix, Shacdn, Moon, and Modular UI which can be used as an alternative to Material Design:

Ultimately, these packages are about reducing Flutter’s verbosity when it comes to styling and theming. Learning about different ways of doing things is a good way to broaden your mind, even if you end up not using these alternatives.

Flutter Articles

Here are my top picks from this month.

📝 Everything You Always Wanted to Know About HttpClients

When using the http package, the easiest (and most naive) way of making network requests is to use top-level functions such as get and post.

But if you read the instructions carefully, you'll find this:

If you're making multiple requests to the same server, you can keep open a persistent connection by using a Client rather than making one-off requests.

This quickly leads to some additional questions:

  • How many HttpClients should you use and why?
  • Should you close your Clients?
  • Why should you use the new native HttpClient implementations?
  • How to ensure Flutter uses the correct Clients?
  • Pitfalls to avoid

To learn more, read this detailed article by Thomas Burkhart, which shows how to optimize your networking code and minimize latency, using a real-world app as an example:

📝 Flutter Vs React Native : Performance Benchmarks you can’t miss

How do Flutter and React Native compare when it comes to rendering performance? To find out, Natesh Bhat wrote some benchmarks (here's the source code) and ran them on some Android devices in profile mode.

He then shared this article, collecting all the results and reporting metrics such as FPS, app size, memory & CPU usage:

📝 Practical Fragment Shaders in Flutter | Guide

If you want to add some eye candy to your Flutter apps, fragment shaders are a great way to go.

Fragment shaders are low-level programs that run in parallel on the GPU. They are not written in Dart but in a special language called GLSL).

If you want to learn how to use them, this in-depth series covers the basics and shows some practical use cases and generative-art examples, including how to apply a real-time filter to the device camera stream from the camera plugin:

If you are into generative art, you should also check out this repo with some cool videos from Roaa’s talk at FlutterCon EU: Flutter Meets Art.

📝 How to Store Data in Secure Storage in Flutter

If you need to store sensitive data securely on device, using shared preferences is a mistake and you should use the Flutter Secure Storage plugin.

To use it correctly, some platform-specific configuration is needed, and this article covers most of the important details and configuration options on iOS and Android:

Flutter Packages

Recently, I've come across two packages that can be used to build complex layouts and widgets.

🧱 Boxy

If you need to create a layout that is not supported by the built-in widgets, you have two options:

  • Implement it yourself by writing some custom render objects (hard way)
  • Try to find a package that does this for you

In fact, the boxy package was created to support use cases such as:

  • Flex layouts with custom cross-axis sizes
  • Custom layouts with simplified layout, paint and hit-testing rules via delegates
  • Widgets that depend on the size of other widgets
  • Sliver lists with box decoration

For all the details, check:

🧱 Material Table View

The official two_dimensional_scrollables package already contains a TableView widget that displays a table that can scroll horizontally and vertically.

If TableView is not enough for you, you can explore the material_table_view package, which offers additional functionality such as reordering columns and rows, placeholder rows with shimmer effects, and so on.

Check this page for an overview of the supported features and limitations:

I have yet to use these packages, so I recommend you do your own research and evaluate their pros and cons.

Upcoming Conferences

The Flutter conference season is in full swing, with FlutterCon USA taking place in NYC and Flutter & Friends running in Stockholm.

You can check the agenda and view all the details here:

Latest from Code with Andrea

For the past few months, I’ve been working hard on my upcoming course about Flutter in Production, and I can’t wait to share it with you in October.

I’ve also been sharing many new Flutter tips on my site and social media. If you missed them, here are some of the most popular ones:

Until next time

This month, I took some time off to recharge my batteries and explore some beautiful nature around the Lake District.

Now that I’m back, I can’t wait to crack on with some new Flutter content and release my upcoming course.

So stay tuned for updates! 🙂

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter In Production

Flutter In Production

Learn about flavors, environments, error monitoring, analytics, release management, CI/CD, and finally ship your Flutter apps to the stores. 🚀

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. Last updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

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