April 2023: Custom Render Objects, Dart2wasm, Vector Graphics Galore with Rive

Since the last Flutter stable release at Flutter Forward, many interesting things have happened:

I don’t know about you, but I feel a new stable release is due. So let’s cross our fingers, and hopefully, we’ll get one at the upcoming Google I/O.

But that’s enough speculation for now. And let’s get on with the usual Flutter newsletter.

Flutter Build Show (and other videos)

The Flutter team continues to spoil us with high-quality educational videos.

And their video lineup has just expanded with a new series called Flutter Build Show.

To find out what it’s all about, here’s the introduction:

📹 Custom Render Objects

Fresh from the oven, here’s the first video from the new series, covering the fascinating (and complex) topic of Custom Render Objects.

The video explains that there are cases, such as when rendering a custom chat message bubble, where Flutter’s single pass layout algorithm does not suffice.

And you’ll also learn to implement your own Custom Render Object with highly-tailored layout rules using RenderBox subclasses. 👇

📹 flutter_animate (Package of the Week)

I’ve already covered the flutter_animate package back in February.

What’s great about it is that it makes complex animations easy to implement.

For example, you can easily combine (and even stagger) multiple animations with a few lines of code:

Text('Hello World!') .animate() .tint(color: Colors.amber) .then() .shake()

For all the details, watch this video:

📹 firebase_storage (Package of the Week)

Are you building an app where users need to upload many images and assets to the cloud?

For that, you can use Cloud Storage and create buckets that allow you to store files, just like you would do with a regular filesystem.

And this video shows how to upload and download files using the Firebase Storage package:

📹 Flutter, Dart, and WASM-GC: A new model for Web applications by Kevin Moore @ Wasm I/O 2023

WebAssembly (WASM) is a new, exciting frontier for building high-performance web apps (without relying on the standard DOM approach), and is now supported by all major browsers.

The Flutter and Dart teams are already working on adding WASM as a compilation target when building applications for the web.

This has the potential to make Flutter web apps much faster. And this in-depth talk, Kevin Moore explains what it takes to enable Dart to Wasm compilation and shows some promising demos too:

Other Flutter Articles, Packages, and News

Here are some new articles and packages that caught my attention over the last month.

📝 Avoid these common Flutter mistakes with DCM

Ever made a call to setState after an asynchronous gap or inside a widget’s build method?

Or forgot to await a Future inside a try/catch block?

These mistakes often lead to bugs that can take hours to debug. And thanks to the new dartcodemetrics package, they are much easier to identify and fix.

So don’t miss this article, showing how to prevent many common mistakes:

🧱 Puby (Dart Package)

As an open-source author and maintainer, I work with dozens of Flutter projects that take up a ton of space on my hard drive.

To clean up disk space, I used to run a script that would run flutter clean recursively in all my folders.

And thanks to the new puby package and the puby clean command, reclaiming disk space becomes much easier.

I'm not kidding. After running puby clean on my home folder, I freed up over 40 GB of disk space! 🤯

To learn more about what this package can do, check it out here:

💻 Flutter now supports non-uniform borders (similar to Figma)

Did you know that Flutter now supports non-uniform borders?

This makes it much easier to implement custom borders, much in the same way they can be designed in Figma.

For all the details, check this Reddit thread and the corresponding PR:

💻 A Flutter game built entirely with Vector Graphics using Rive

The Rive app is a big success story, allowing developers to build interactive animations that can be embedded into a Flutter app.

And to show how powerful the Rive renderer is, here’s a new game built entirely using vector graphics.

And since the demo was built with Flutter, it runs on iOS, macOS, and Chrome with great performance. 🚀

Latest on Code with Andrea

Since the last edition, I’ve published one new article.

📝 Firestore Pagination Made Easy with FirestoreListView in Flutter

When working with Cloud Firestore, pagination is particularly useful for handling large data sets.

And since our users can only view a limited number of items at once, it is sensible to implement pagination and fetch only the data we need.

So here’s a new article showing how to use the Firebase UI for Firestore package to implement pagination in just a few lines of code:

🔥 Flutter & Firebase course: launching on April 25th

After months of work, I’m nearly ready to share my new Flutter & Firebase course, which will open for pre-sale on April 25th.

As of today, I have recorded 5.5 hours of content, and the course will contain many additional resources too.

For all the details, check out the course page:

Until Next Time

Due to some personal circumstances, the last few weeks have been tough for me. But I’m glad I can focus again on what I like most: delivering educational Flutter content for everyone. 🙏

So stay tuned for my next updates!

Happy coding!

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.