April 2024: WASM I/O Updates, Theme Extensions, Signals 5.0, iOS Privacy Manifest Tools

Only a few weeks are left until Google I/O, kicking off on May 14th.

I bet the main focus will be on Google’s latest AI advancements. But we can also expect a new Flutter release, and I hope to hear some updates on WASM support and Dart Macros.

But for now, let’s focus on this newsletter and the latest videos, articles, packages, and tools from the Flutterverse.

Flutter Videos

This month, I have three new videos for you.

📹 Building a Flutter Calculator: Part 1, The Layout

Back in my January newsletter, I shared a video by indie dev Andrei Lupsa, who made a calculator app with 10M downloads on the Play Store.

In his latest video, he walks us through his app development process when building a complex calculator layout using Flutter:

📹 Flutter, Dart, and WASM: Shipping a new model for Web applications by Kevin Moore @ Wasm I/O 2024

Here’s a great talk by Kevin Moore, showing all the latest progress made on WebAssembly.

Inside, Kevin unveils a demo of the Wonderous app, along with some benchmarks showing how the Wasm build renders frames between 60% and 120% faster than the non-Wasm build.

The talk also delves into the newest Dart features, along with the challenges of Dart and JS interoperability:

📹 ThemeExtensions | Decoding Flutter

If you struggle to keep your app's colours and styles consistent across every page, theming is your ally. But let's face it: The built-in ThemeData class has so many different properties that it’s hard to use it correctly inside a complex app.

Enter theme extensions. They arrived over a year ago to make theming easier, and this video shows you how they work:

Just recently, this article was also published, showing how to create theme extensions in your apps, using light and dark mode as an example:

Articles from the Community

This month I only have one community article to share, but it is very good. 👇

📝 The power of open-source. Making Maestro work better with Flutter

If you want to write end-to-end UI tests for your mobile app (either built with Flutter or native frameworks), Maestro is a good way to go.

This article isn't just a read; it's a journey exploring several key areas:

  • How Flutter’s semantics tree and AccessibilityBridge enable a good screen reader experience
  • The limitations of flutter_driver and integration_test when it comes to UI testing
  • How Bartek Pacia tackled the #1 most upvoted testing issue by adding a semantics identifier property across all layers of the Flutter stack
  • How Maestro can now leverage the new Semantics.identifier when writing UI tests

Read on for all the details:

📝 Flutter Squircle Study

Rounded corners are everywhere in UI design. But did you know that there are 12 different variations for building beautiful UIs in Flutter?

Studied Squircle like Flutter ShapeBorder implementations
Studied Squircle like Flutter ShapeBorder implementations

In the quest for supreme fidelity, Mike Rydstrom has meticulously compared these shapes to find the best approximation of the iOS Squircle shape:

As a bonus, you can see these shapes in action on this Flutter web demo.

Packages and Tools

These packages and tools deserve a mention this month. 👇

🧱 flutter_custom_carousel

The gSkinner team is well known for the quality of their packages.

And the latest flutter_custom_carousel is just fantastic (if you don’t believe me, run the example app from the official repo).

To learn more, check out the official page on pub.dev:

🧱 Signals 5.0

Based on Preact Signals, this Dart port by Rody Davis has been making headlines as a reactive state management solution with great documentation and an easy-to-use API.

Signals is under active development, and just recently, version 5.0 was introduced. If you want to check it out, head to pub.dev:

🧱 genq: Instant Data Class Generation for Dart

The most common complaint with build_runner is that it’s too slow for large projects.

Enter genq, a new code generation tool that manages to achieve a 100x speedup over build_runner.

While impressive, genq currently only supports data class generation as a use case. For other code generation needs, you'll still rely on build_runner-based packages:

🧱 Shorebird 1.0

Shorebird is a code-push solution for updating your Flutter apps instantly over the air, deploying fixes directly to end users’ devices.

And just recently, it reached version 1.0.0, featuring stable support for iOS.

To learn more, read the official announcement:

🧱 iOS Privacy Manifest Tools

With the new Apple mandate effective May 1st, apps submitted to the iOS App Store must include a Privacy manifest file detailing data collection practices.

Navigating the requirements for this file can be daunting, but there are tools out there to ease the process.

First up is the Privacy Manifest CLI, which scans your Xcode project to identify third-party SDKs in use by your app:

With this tool, I managed to list all the 3rd-party SDKs in my app, but I couldn’t get it to generate a Privacy Manifest file (more investigation needed).

The second tool is a simple website that lets you manually select the collected data types, tracking domains, and Required Reason APIs for your app and generates the PrivacyInfo.xcprivacy file for you:

If I’m honest, I’m still a bit fresh about the Apple guidelines and don’t fully understand them yet. Hopefully these tools will come handy as the requirements become enforced on May 1st.

Latest From Code With Andrea

Since the last newsletter, I’ve published two new articles and launched my Flutter Tips app on the app stores. 👇

📝 Flutter Pagination with Riverpod: The Ultimate Guide

Handling a lengthy list of items in your app? Pagination is essential for that.

Depending on your requirements, packages such as infinite_scroll_pagination may be suitable. But if you already use Riverpod, it’s not hard to implement an efficient pagination strategy, and this article covers all the details:

📝 How to Build and Deploy a Dart Shelf App on Globe.dev

The Shelf package is well suited for writing simple server-side apps in Dart.

In this tutorial, I show you how to build and deploy a Dart Shelf App that taps into the OpenAI API securely without exposing the API key in your Flutter client:

📱 My Flutter Tips App is Now Available for iOS and Android

I've been curating Flutter tips and tricks for over two years, compiling a collection of over 150 entries in this GitHub repository.

And recently, I built a mobile app that makes it easy to browse and save them for offline use, right on your phone. After sharing some updates on Twitter, I’ve now published it on the App Stores, and you can download it here:

While a web version of the app is not planned, I'm actively porting all the tips to my website for easy online access:

Until Next Time

What will we get in the next Flutter release?

To find out, you can tune in to all the upcoming Google I/O sessions.

Or, if you want a concise recap without the fuss right in your inbox, simply sign up for my newsletter below.

Thanks for reading, and 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.