January 2023: 17 Days of Flutter, Flutter Forward, Dart Frog Tutorials, New Packages

2023 is here, and the Flutter team has already hit the ground running by publishing 17 Days of Flutter: a collection of code labs, blog posts, videos, and code challenges that will teach you how to build games in Flutter and much more.

And January 25 is the big day, with Flutter Forward streaming live from Nairobi, Kenya!

I'm very excited to see what the Flutter team will reveal! And while we wait, here's my summary of all the latest news from the Flutter world.

17 Days of Flutter

Here are the most interesting resources published by the Flutter team this month. 👇

🎬 Flame (Package of the Week)

Flame is a minimalist game engine written in Flutter, giving you many of the building blocks needed to build simple games.

This video covers the basics by explaining how to implement your game logic inside the game loop, work with sprites, perform collision detection, and more:

🎬 Building Doodle Dash with Flutter & Flame

If you enjoyed the Flame intro and want to learn more, watch this series showing how to build a Doodle Dash game with it (here are part 2 and part 3):

You can play the game on this Flutter web demo if you want. And there's even a full code lab showing you how to build it from scratch:

If you're looking for something much simpler and want to explore a mini-game built with Flame, check out this Pong game on Dartpad.

🎬 Using Dart analyze & Dart fix | Decoding Flutter

Have you ever tried to update an old project to the latest APIs and lint rules and got a ton of warnings, like in this example?

Flutter analyze warnings after updating an old project to the latest lint rules
Flutter analyze warnings after updating an old project to the latest lint rules

Rather than fixing all these warnings by hand, you can just run a simple command and watch the magic happen:

dart fix --apply

This will fix most of the warnings for you.

And to better understand how dart fix works and how to use it alongside the Flutter analyzer, watch this video:

Other Flutter Articles and Tutorials

Here's a selection of articles and tutorials from the community.

📝 Building design systems in Flutter

As developers, we often dive into the code before having a design system in place.

This is not ideal and can lead to a lack of consistency, as well as unnecessary overhead for both designers and developers working on the project.

So here's a good article showing how to establish a good design system when building Flutter apps:

📝 Dart Frog full stack tutorial

If you want to build full-stack Flutter apps using Dart on the backend, you've probably heard of Dart Frog by Very Good Ventures.

In this tutorial, Felix Angelov shows how to rebuild the Flutter counter app by connecting to a Dart Frog server using web sockets, and incrementing the counter value in realtime across all platforms.

The tutorial is based on the WebSocket Counter example in the Dart Frog documentation and is well worth a read:

One immediate benefit of using Dart on the frontend and backend is that we can write a lot of code (e.g. model classes) just once by storing it in a shared package. It's also nice that we can use the packages we already know and like (such as bloc and riverpod) directly on the backend, rather than learning a whole new tech stack.

📝 Building a Fullstack App with dart_frog and Flutter in a Monorepo

If a counter app is not complex enough for your taste, Sailesh Dahal has written an entire five-part series on how to build a full-stack todo app with Dart Frog.

By following this series, you'll learn about Dart Frog, Melos, Very Good CLI, Freezed, using Failure and Exception classes, talking to a PostgreSQL database, and more:

📝 First Impression of PocketBase

PocketBase is a minimalist open-source backend that can be easily integrated with Flutter and other major frontend frameworks.

I first discovered it when Fireship made a video about it. And just recently, someone on Reddit took it for a spin and shared some good tips for how to use it with Flutter:

Since PocketBase ships as a single executable file, it is very easy to self-host, making it well-suited for many hobby projects. In fact, I hope I'll get to try it soon and I've already added it to my enormous TODO list. 😅

📝 10 Things the Flutter Team should do in 2023

Last month, Matt Carroll shared this great article about what he thinks the Flutter team should deliver in 2023:

I agree with his conclusion that all the current Flutter limitations lie at the core of the framework and that the Flutter core team should focus its efforts there while letting external contributors take care of the easier stuff.

Without a doubt, Flutter Forward will give us a preview of what's in store for Flutter, and I'm curious to see how many of the issues raised in the article will be addressed in the future.

🚀 3D rendering coming to Flutter?

This PR was recently merged to the Flutter master branch, adding support for rendering 3D models directly in Flutter (see this cool 3D demo on Twitter).

Advancements in 3D rendering capabilities are welcome, and I can't wait to see what people will do with this functionality once it becomes stable. 🚀

Flutter Packages

This month, two packages have caught my attention. 👇

🧱 Crimson (JSON parser)

Crimson is a fast JSON parser and serializer for Dart, built by Simon Choi (who also created Hive and Isar).

What makes Crismon different from other JSON parsers is that it can partially parse the input JSON and access nested JSON fields by using JSON Pointers.

It also supports Freezed classes and claims to be very fast. If your app requires some heavy JSON processing, consider giving it a try:

🧱 Flutter Rust Bridge

Rust is one of the fastest (yet safe) languages out there, making it ideal for tasks that need maximum performance (such as image processing).

And to call Rust code from Dart, you need to use the flutter_rust_bridge, which is nothing other than a code generator that helps your Flutter/Dart functions call Rust functions.

To get started, you can check the official page on GitHub, and learn more by heading over to the documentation.

Latest from Code with Andrea

Over the last month, I've been focusing on my upcoming Firebase course and I haven't published any new Flutter articles (aside from my 2022 retro).

But I managed to update my open source time tracking app with Flutter & Firebase to use my latest Riverpod Architecture:

Time tracker app with Flutter & Firebase
Time tracker app with Flutter & Firebase

Some bits and pieces are still WIP, but this is still a useful open-source repo showing how to use GoRouter, Riverpod, Firebase Authentication, and Cloud Firestore in a single app:

Rest assured that new articles are coming, and I should be able to return to my usual schedule (two articles per month) soon.

And I'll share some juicy details about my Firebase course next week. 👍

Until then, enjoy Flutter Forward!

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.