Another Sunday night means it's time for another issue of the Flutter Bi-Weekly!

It's hard to believe that we're already a month into the new year; time seems to be on hyper-speed these days.

The last two weeks have been filled with lots of new Flutter packages, content, and community discussions, so without using up all of the preview text, let's jump into things! 😉

Blogs ✍️

End-to-end Flutter Architecture Guide

Whether you are interviewing for a new Flutter role or looking to brush up on your existing architecture knowledge, Yatendra's comprehensive guides cover everything from Layer Model UIs to platform integration.

How to Build a Robust Flutter App Initialization Flow with Riverpod

It happens...you build an app, test it on a few devices, ship it to the store, and then a few days later, Sentry (or Twitter/X) reports an obscure issue with your app. To help ensure your users have a great experience each time they open your app, Andrea shares a few tips that can be used to handle errors during the initialization period 🚀

Create a Figma Clone app with Flutter and Supabase Real-time

Tyler from the Supabase team walks you through creating a real-time Figma-like app using Flutter and their real-time SDK. In their blog post, you will learn to create the database for the project, implement the UI using a custom painter, and bring it to life using their broadcasting features. 

A PocketBase backend for Flutter and Dart

Pocketbase is the open-source backend for SAAS and mobile apps. In his latest post, Suragch walks you through the process of creating a Dart backend using Pocketbase complete with authentication and database support 🔌

Shorebird's Code Push for Flutter now in iOS beta

Shorebird's latest blog post announces their new iOS beta feature for Flutter: Code Push. This tool enables developers to push live updates to Flutter apps on iOS devices instantly, bypassing traditional app store updates. Check out their full release blog post to learn how to get started.

We Need To Talk About FlutterFlow

FlutterFlow has been receiving lots of attention recently following its $25M fundraising announcement. The tool allows developers to create Flutter apps visually by dragging and dropping components from their UI editor. In this comprehensive review, Andrea looks at using FlutterFlow to build an app, including creating custom components, testing integrations, and more.

Videos 🎥

Rotary passcode | Flutter UI challenge | Part 2: Animations

Eight months after the first part (yes really 🤪🙈), Mangirdas is back with part two in his Flutter UI series around creating a rotary password dial in Flutter. This video covers the fun parts of animation and gesture handling to give the dial its signature spin!

Observable Flutter 34: Code generation

Code generation, the one topic in Flutter that's more confusing to newcomers other than state management 🤪.

Flutter GDE Anna Leushchenko joins Flutter DevRel Craig Labenz to discuss how developers can use code generation libraries to accelerate development.

Flutter Made Science

Have you ever wondered how far you can push Flutter or some crazy projects you can build with Flutter?

Flutter's resident mad scientist and former team member Filip Hráček talks about doing just that in his Flutter Firebase Festival from September of last year.

Best Flutter Packages Of 2023

With over 11,000 Flutter and Dart packages released in 2023, Jay Ben breaks down the top 20 packages that are worth checking out for your next project 😎

Noteworthy Community Moments 💫

Upcoming Dart feature: Marcos!

In the not-too-distant future, the days of manually having to write `toJson` and `fromJson` methods might finally be coming to a close. Dart's experimental Marcos feature is being tested behind a feature flag on the latest version of Flutter's master branch. Check out the linked repository to explore the code or learn more 🤓

Note: This is very experimental, try out at your own risk!

Flutter is not too verbose to learn, but is too verbose to write

Over the last week, an interesting conversation has been happening on the r/FlutterDev subreddit regarding the current state of Flutter's syntax compared to newer UI toolkits such as Jetpack Compose and Swift UI. OP u/_ri4na compared the verbosity of creating simple UIs across the three main frameworks (Flutter, SwiftUI, and Jetpack Compose), highlighting the extra steps and lines of code needed. 

Personally, after six years of the same syntax and verbosity, I'm in the camp of it's time to reevaluate Flutter's syntax and approach when it comes to handling Stateless vs. Stateful widgets, animations, etc. Very curious to hear what everyone else thinks, the entire discussion is worth a read. 

Tweet of the Week 🥇

That's all folks 👋

I hope you enjoyed today’s issue of the Flutter Bi-Weekly! As always, I am very keen to get your feedback on the content and thoughts on the projects mentioned in today’s newsletter.

If you have a project, blog post or project you would like to share with the community in the next release, please feel free to send me message on Twitter/X or drop me an email 📧

– Nash 

Happy 2024! The start of a New Year is always a great time to start (or, in my case, restart!) new habits and themes for the year. Since creating this newsletter in 2022, we made it to 10 issues before life became extremely hectic, and all consistency went out of the window. 

From moving to a new country, releasing a new product at work, and everything in between, it became super challenging to maintain open-source projects and commitments. As we start the new year, one of my goals is to slowly start contributing to open-source again, starting with the Flutter Bi-Weekly! 

So, with the small life update out of the way, grab your coffee, open a terminal, and let's flutter run! 🛠️

Blogs ✍️

Scaling a Flutter team

Jonas Uekötter, a Flutter GDE and developer, talks about his experience growing a Flutter team from two to five engineers and a dozen developers in their domain to almost forty. In his post, he covers creating a UI library, adapting the company's design language to help with consistency, optimizing pull requests, application architecture, the nuances of remote work, and more.

Streamlining Image Asset Management 👩🏻‍🍳🪄

We've all been there, you are working on an app, and suddenly, your designer passes you a Figma link filled with many custom images or icons for the app. Working with assets in Flutter can sometimes be tedious, especially if you're referencing the paths of each asset directly. In her latest blog post, Akansha Jain explores different options that can be used to manage your project's assets, from helper classes to codegen ♺

Mastering Error Handling in Dart

In "Mastering Error Handling in Dart," Michael Lazebny explains the difference in treating planned exceptions vs. application errors. In his post, you will learn how to make the most out of stack traces for debugging, setting up remote error capture, overriding FlutterError.onError and PlatformDispatcher.onError for comprehensive error tracking, and much more.

Passwordless login in Flutter via email OTP with Supabase Auth

Christos brings the dream of never having to type passwords ever again a little bit closer in his latest Flutter tutorial using Supabase's Auth SDK. In his tutorial, Christos explains everything, from working with the Supabase SDK to configuring Flutter's navigation system to handle and respond adequately to OTP codes and magic links.

Videos 🎥

How to Build a Node Based Editor with Flutter and Signals (Dart)

If you have been following the latest from the Web Dev world, chances are you have heard about the state management solution "Singals" before. It is a popular library for handling complex state problems efficiently and intuitively. In his latest YouTube video, Rody Davis build a Node-based editor using Flutter and his new package, Flutter Signals, to demonstrate how it can be used in Flutter applications.

Intro to Dart Series by Net Ninja

Net Ninja has started a new YouTube series on learning the basics of the Dart programming language on their channel. While the basics may not be something we are all actively seeking out, I still wanted to include this one as it is an excellent resource for any peers or friends who might be just starting their Flutter/Dart journey.

[Twitter Spaces] Let’s talk about all the products built with Flutter!

Matt Carroll hosted a two-hour Twitter Spaces (are we still calling it that?!) session covering different products built with Flutter and examples from the community. Although this one is not a YouTube video, it is still worth a listen with your morning coffee. ☕️

DropdownMenu - Widget of the Week

Have a list of items you need your users to quickly select an option from? DropdownMenu has your back. Learn how you can add this widget to your UI in Flutter’s latest Widget of the Week episode 📋.

Noteworthy Community Moments 💫

Serverpod 1.2 release! 🚀

Serverpod is the missing Dart backend for your Flutter apps. Started by former Googler Viktor Lidholt, Serverpod allows developers to write robust and scalable backends entirely in Dart. With their latest release, the team shipped over 70 new features, including powerful Database tools, a supercharged CLI, and an extension for VSCode. Check out the linked release notes to learn more! 

RevenueCat’s new Flutter SDK! 💰

RevenueCat helps developers make money by providing them with rich tools to implement, analyze, and grow in-app subscriptions. With the addition of Paywalls to their Flutter package, developers quickly present users with rich, customizable in-app offers with just a few lines of code. Check out their documentation to learn more.

Supabase Auth UI Release 🔐

Supabase released their new Auth UI package for Flutter! Using the Supabase Auth UI package, developers can quickly add bullet-proof authentication to their Flutter apps with just a few widgets -- all backed by Supabase's auth infra and providers.

#GlobalGamers 8 week challenge

If you like defending the planet, building games, and writing Flutter code, this challenge is for you! Hosted by the Flutter team and Global Citizen, this 8-week challenge encourages developers to unleash their creativity by building sustainable games using Flutter's Casual Gaming toolkit. Check out the release page to learn more and get started!

Tweet of the Week 🥇

That's all folks 👋

Thank you for reading today’s issue of the Flutter Bi-Weekly! Here’s to 25 more posts before the year is over 🫡

If you have a project, blog post or project you would like to share with the community in the next release, please feel free to send me message on Twitter/X or drop me an email 📧

– Nash 

Welcome to issue #10 of the Flutter Bi-Weekly! 

Since our last issue, I had the unfortunate pleasure of accidentally deleting one of my most successful Flutter projects 😅🥲.

Last Sunday, while attempting to update Awesome Flutter Snippets with Flutter 3 support, I ran into a tooling bug around the personal access token for the VSCode Marketplace. 

After spending some time debugging, I noticed something strange, the publishing tool had two accounts listed on my machine, "Nash" and "nash". 

This was odd since I only have one account for VSCode, and the plugin was published under "Nash". Making no progress on the PAT issue, I removed the lower-case "nash" to see if it would make any difference in allowing me to publish...oh how I was wrong 🙈. 

In a strange turn of events, deleting "nash" wiped my account along with the existing plugin and organization...four years' worth of history and 950,000 downloads gone 😬.

After reaching out to Microsoft and exploring a few options, we could not restore the original account and plugin. Version four of Awesome Flutter Snippets is now up on the VSCode Marketplace but under a newly created organization. 

That's my fun story of the week 😅. Thank you to everyone who reached out during this time; if you are a VSCode user with the extension installed, you will need to re-download it using the link above to receive future updates. Don't forget to leave a rating when you do since those also disappeared ☠️

Blogs ✍️

Flutter: BLOCs at Scale | 2 — Keeping BLOCs Lean

In a follow-up to his first blog post, Nick is back with a follow-up focused on the first two concepts in cleaning up and scaling your BLOC code 😎

What really grinds my gears in Flutter

No framework is perfect, and Flutter is no different. In a follow up to his post from the last issue, Dominik outlines the areas he thinks Flutter can improve to reach the next level. 

Building a Video Collaboration Platform With Flutter and Feeds

Do you ever wonder what goes into building collaboration tools like Frame.io, Wipster, or Vimeo? My colleague, Sacha, walks us through the process of building a simple real-time collaboration platform using Flutter and Feeds.

Supabase Flutter SDK 1.0 Developer Preview

Supabase has been growing rapidly in the developer community, and the team is slowly adding support for new languages and frameworks. Earlier this week, they shipped v1.0 of their SDK for Flutter!

Videos 🎥

Realtime Applications with Sockets - Introduction in Sockets with Dart

Sockets allow your applications to send and receive data in real-time, making them perfect for interactive applications like GPS trackers or messaging platforms.

In their latest video, Flutter Explained, covers how you can build a simple Websocket server and client entirely in Dart.

Build a Worlde Clone App in Flutter

Are you still obsessed with Wordle? 🤓

Doctor Code shows us the steps to build a clone of the popular word game in Flutter!

LinearGradient (Widget of the Week)

Need to make your apps pop even more?!

LinearGradient is here to help 😎. While it's not technically a widget, LinearGradients can be used by any widget that takes a BoxDecoration.

Learn more in the latest Widget of the Week!

Build a Flutter Chat App: 04 - Migrate Version 4 & Stream Firebase Extensions

Have you been following along with Gordon Hayes Flutter chat series?

In the latest installment, Gordon goes through the existing project and beings cleaning up the code by migrating the package extensions and simplifying the authentication workflow of his application with Firebase Extensions.

Check out the playlist above to follow along!

Noteworthy Community Moments 💫

AirDash

AirDash is a new Flutter package from Simon Bengstsson that allows users to send files directly between devices without requiring an intermediate server.

The code is open-source and available on Github for developers to try out 🤓

AppFlowy

AppFlowy is an open-source alternative to Notion, which puts users in charge of their data and customizations.

The project is built using Flutter and Rust and available on Github with comprehensive installation instructions for all supported platforms.

Flutter dArtists #24 - AMA?

After a mini-hiatus, Mangirdas Kazlauskas and Danny are back with episode #24, Flutter dArtists on Twitter! 

In their latest episode, the pair did an open AMA with listeners from the Flutter community covering various exciting topics. 

Take a listen and follow them both to be notified about the next Space. 

deprecate: BlocOverrides API

For those using flutter_bloc/bloc in their projects, Felix and the team opted to deprecate the zone-based BlocOverrides API introduced in version 8 and revert to the version 7 API.

Check out the Github Issue linked above to learn more and view the migration steps.

Flutter Essential Training: Build for Multiple Platforms - LinkedIn Learning

Pooja Bhaumik released her first Flutter course on LinkedIn learning! 🥳

"Flutter Essential Training: Build for Multiple Platforms" is the culmination of 8+ months of discussions, scripting, recording & post-processing aimed at helping developers learn the core of Flutter and Dart. 

Tweet of the Week 🥇

That's all folks 👋

Thank you for reading today’s issue of the Flutter Bi-Weekly!

I will try not to accidentally delete more projects between now and our next issue 😅.

– Nash 

Hello Internet 👋,

Welcome to the Flutter Bi-Weekly! As we close July, we are only a few weeks away from Flutter Vikings 🥳.

Over the last two weeks, lots have happened in the Flutter community and the wider tech community in general. 

Notably, Notion released an update to announce performance improvements to their application but somehow managed to spark a deep (and fierce) philosophical debate around building Native vs. Cross-Platform vs. Hybrid. However, most people forget that the last category exists 🙈. 

Blogs ✍️

Announcing Zapp, an in browser sandbox environment to build Flutter apps

Ready to build and share apps in your browser? Intertase released their new online platform for writing and sharing Flutter apps. Unlike existing tools such as Dartpad, Zapp allows users to install packages directly in the browser to use with their apps.

Check out the link above to learn more and share your creations 😍

N things I love about Flutter

As Flutter aficionados, we all have the parts of the framework we cannot live without. Dominik compiled a list of the best things he loves about Flutter into a short blog post 💙.

Fun Fact: Dominik and I are former colleagues, having worked together during the early days of the framework. Crazy how time flies these days. 

Definitive Flutter Painting Guide

There are two things we know for sure in life, everything is a widget, and if Deven releases a blog post, chances are you're going to be in for a treat! 

In his latest post, Deven covers everything you need to know about custom painting and more. The piece is worth a read if you're interested in taking your painting skills to the next level or are curious about different aspects of rendering, such as working with shaders. 

Multi-Factor Authentication with Flutter and Firebase

Multi-factor authentication is a feature that allows the user to add an extra layer of security by opting to receive an email or SMS when logging into their account. 

As a developer building with Flutter and Firebase, you can now enable multi-factor auth in your apps, thanks to the latest updates in FlutterFire. Check out Guillaume Bernos' blog post to get started! 

CSS Filter for Flutter: Apply filters in Flutter as you use CSS

Do you yearn to have CSS filters in your Flutter apps? A way to easily change the contrast, shadow, or other similar properties in your application?

Good news!! You can now do these things with a fun new package called CSSFilter! Learn how you can get started in the post linked above 💯

Why dividing(/) by 0 does not throw an error in Dart — How Dart handles numbers

We've all been there. It's 9 pm on a Friday, you're in the hacker den coding away on the most fantastic side project, but then it happens...you accidentally divide by 0 😱

Unlike other languages, diving by 0 in Dart does not result in an error. Yogesh Parwani wrote a short explainer on Dart's number system to give you the full breakdown. 

Explore Flutter Bloc 8.0.1 Design Pattern In Flutter

If you're considering flutter_bloc for your next application, this post is for you!

Shaiq khan explains everything you need to know about building an app using flutter_bloc 8.0.1! 

Videos 🎥

Build A Flutter Game: Connect Four

Gamers Unite! Dave of 1ManStartup has created a great video on building a Flutter version of Connect Four using Flutter's Casual Game Toolkit.

His video is definitely worth a watch if you're interested in building games with Flutter 😎

Display Charts using Flutter

Doctor Code (lovely name! 😄) has put together a speed code video building a Bitcoin tracker in Flutter, complete with a chart integration.

If you're a fan of beautiful UIs and chill music, then you'll enjoy this video.

Flutter's Way State Management - No Packages

Regardless of how you're managing state, one thing is guaranteed; an InheritedWidget is used somewhere along the way under the hood. 

To help demystify some of the misconceptions and usage around InheritedWidgets, JediPixels created a short 30-minute video reviewing the API and building a simple use case. It's a great breakdown of a topic many view as complex -- especially when just starting. 

How to create multiple shadows for a Text Widget in Flutter

Need to add some shadow and colors to your text to stand out? Mo Malaka created a quick tutorial showing you how to implement just that! 

Creating a Flutter project with Authentication and Realtime db by mason_cli

So you want to build a Flutter app but are unsure where to start? Salih of the AWS Amplify team has you covered!

Check out his video to learn how you can go from a new project to database integration in just a few lines of code using mason_cli and Amplify's Flutter SDK 😎

Noteworthy Community Moments 💫

Tweet of the Week 🥇

That's all folks 👋

Thank you for reading another edition of The Flutter Bi-Weekly! I hope you enjoyed this edition and found something new. 

If you have a post you’d like to see featured in the next edition, please reach out over Twitter. My DMs are always open.

– Nash 

Hello Flutter friends, it has been a while! 

A "few" weeks have passed since the last release of the Flutter Bi-Weekly, and a lot has happened since. 

I had the opportunity to attend Google IO this year and experience the event in person for the first time. The cherry on top, a project our team worked on, got mentioned during the developer keynote! 

Following IO, Droidcon SF came up, and your favorite Flutter Dev shared a talk with my friend and colleague, Filip. 

To wrap things up, Stream had a booth at The Next Web in Amsterdam, which was lots of fun -- especially since it was my first time in Europe! 😄

Mixed with personal and professional commitments upon returning, time has been surprisingly elusive over the last two months. 

Nevertheless, the time has come once again to resume the Bi-Weekly Flutter updates everyone knows and (hopefully?) loves! 

Blogs ✍️

Flutter Riverpod: How to Register a Listener during App Startup

What does responding to push notifications, authentication, and handling deep linking all have in common? Background listeners at app startup!

Implementing this workflow can be tricky, but lucky for us, Andrea wrote a post on how you can configure your Flutter apps to handle these use-cases using Riverpod 😎

Why do my Flutter screens look washed out?

Coping the hex codes from Figma to your application and noticing the colors aren't matching up? Chances are it has something to do with the color space.

Check out Manav's blog post to learn more.

The Use of Architecture with Riverpod State Management - Case Study

Scale is one of the most important factors for engineering managers when choosing a design pattern or state framework for their apps.

As Riverpod continues to grow in popularity, we see more and more developers adopt the library and share their experiences, like today's author, Ewa Radomska, who wrote a fantastic case study on using Riverpod on a large project.

Migrating a text editor library (13K LOC) from no state management (spaghetti code) to state management.

u/SpaceInstructor had the unenviable task of restructuring a 13k LOC package of spaghetti code into a streamlined and scalable architecture.

Lucky for us mortals, SpaceInstructor documented the process in a fantastic Reddit post covering some of the challenges and architectural decisions made along the way.

Build a Flutter app with Very Good CLI and Supabase

Want to learn how you can refactor an existing project to be ultra-scaleable and testable?

Ana Polo and our friends at VGV did just that using Supabase's starter Flutter project. Check out the link above to learn more.

Videos 🎥

AWS Amplify Flutter In 5 Minutes

AWS Amplify allows users to quickly build feature-rich, full-stack web and mobile applications. The team there has been on a roll lately with awesome keynote and content releases around their Flutter SDK. 

To help you get started, Mo Malaka made a five-minute guide for Flutter devs!

NoSQL Database Storage | Flutter ObjectBox (vs Sqlite, Sqflite, Hive)

Do you need to persist some app data on device or quickly synchronize it with multiple devices?

ObejctBox allows developers to do all of these things and more. Check out Johannes' latest video to learn more!

Full Stack With Flutter - Python, Dart, Flutter and Rust

Ready to become a full-stack developer?

In Vandad's latest Youtube series, you will learn how to build a full-stack application using Python + Django, Dart + Flutter, and Rust. Check out the link above if this sounds interesting to you. 😎 

EVERY Flutter Cupertino Widgets

We've all heard about Material Widget but have you tried building an app using the Cupertino widget set?

To help you get started on that quest, FlutterMapp made a video detailing the use of every Cupertino widget included in the framework! 

Quick start to building a game in Flutter

A key announcement from the Flutter team at Google IO was the Flutter Casual Game Toolkit.

Join the Flutter gaming master himself, Filip Hracek, on Flutter's official Youtube channel to learn how you can bring your games to life using the project 👾

Exploring Transform And Matrix4 In Flutter

One of the most powerful widgets in the Flutter catalog is the Transform widget. Transform widgets allow us to fundamentally alter how widgets look and behave, allowing us to create new, complex types of animations. 

To learn more about Transforms, check out Deven's first animated video on his (still) brand new Youtube channel :)

Noteworthy Community Moments 💫

Help Flutter's PM Leigha Jarett Flutter's iOS widgets to the next level 😎

Tweet of the Week 🥇

That's all folks 👋

Thank you for reading another edition of The Flutter Bi-Weekly! I hope you enjoyed this edition and found something new. 

If you have a post you’d like to see featured in the next edition, please reach out over Twitter. My DMs are always open.

– Nash