Flutter Force Weekly
Your hub for all things Flutter! Discover codes, repos, libraries, projects, and articles. Let’s build amazing apps together!
Welcome to this week’s newsletter! We’ve got plenty of exciting updates and insights to share. Dive into the latest tips, tricks, and resources for Flutter development, keeping you up-to-date with the freshest content in the community. Whether you’re looking to enhance your skills, explore new libraries, or stay informed about the latest trends, this edition has something for everyone. Let’s continue building amazing apps together! 🚀
Step by step guide to becoming a Flutter Developer in 2024
Step by step guide to becoming a Flutter developer in 2024
Articles
Flutter on LG TVs
LG TVs run on webOS, which, as the name implies, means apps are written in JavaScript. Most of our apps use React. When we first adopted React, we were pleased with the development productivity it provided, but sadly its initial performance was subpar in terms of start-up time, memory consumption, and responsiveness. After significant and complicated optimizations we reached performance benchmarks that were good enough, and yet we desired a new technology that was both fast and simple.
For our new experiment, one engineer proposed rewriting our Japanese Electronic Program Guide (EPG) in Flutter. This was an appropriate candidate for exploration, because a unique layout had already forced our Japanese EPG to be a completely isolated app with a distinct codebase. Of course, this nicely limited the scope of the experiment.
Flutter Design Systems: Exploring Modern Alternatives to Material Design
Design systems are essential frameworks that ensure consistency and coherence in application development, providing a unified language for designers and developers. They encompass guidelines, components, and tools that streamline the design and implementation process.
In Flutter, Material Design is the default design system, deeply integrated to provide a seamless development experience. However, while Material Design offers a robust set of components and styling options, it can sometimes be restrictive or verbose, making customization and extension challenging.
This article explores alternative design systems for Flutter that address these limitations, offering more flexibility, ease of use, and unique features that cater to diverse project needs.
Flutter Monorepos and Melos
Melos has become a go-to tool for developers working with Flutter and mono repositories. This series of articles delves deeper into its functionalities, exploring how it empowers you to effectively manage and build complex Flutter projects. But before that, let’s understand why a team might opt to use a mono repo. If you want to skip ahead and dive straight into Melos, click here [Part 2].
How to Detect if Flutter Application is in the Background
In Flutter, there are multiple methods to detect whether an application is in the background or foreground. Detecting these states enables you to implement specific actions based on whether the application is actively being used (foreground) or not visible and not receiving user input (background). In this post, we will cover two approaches to determine whether the application is in the background or foreground.
Flutter without the Big Ball of Mud
This is part 7 in my “Flutter from a complete beginner” series. In this post, we will finally ditch the demo app, add a first meaningful service to our application and connect it to a fresh new UI.
This sounds simple, but because the goal is production-ready code and not some quick hack, there’s quite a few thoughts that have to go into this task.
At the end of this post, we should have a clean architecture for our flutter app and understand how providers stitch everything together.
Creating a multiplayer crossword with Gemini, Flutter, and Firebase
For Google I/O this year we built a multiplayer crossword puzzle using a combination of Google technologies including Gemini, Google Cloud, Flutter, Firebase and more. By completing this solution, you’ll learn about the project itself — a crossword puzzle that anyone in the world can solve collaboratively via a web game interface — and what was necessary for us to create this experience using Gen AI. After trying the game and reading through the blog posts, you will complete two codelabs that focus on the Flutter UI needed to render the crossword and how Firebase Genkit — the technology behind the generative AI hints system — works. Finally to earn the developer badge associated with this solution you will complete the quiz at the end.
Packages
sound_spectrum
A Flutter package for visualizing audio data in a customizable and interactive way.
Current Status: This package is not yet published on pub.dev. The reason for this is that sound_spectrum currently depends on the flutter_soloud package, which is only available as a Git source. We plan to publish sound_spectrum on pub.dev once flutter_soloud is officially released.
flutter_env_native
A plugin/utility that provides compile-time variables for native platform.
FlexibleWrap
FlexibleWrap is a Flutter package designed to provide a flexible and customizable way to arrange widgets in a wrap layout. It allows developers to create dynamic layouts where widgets can wrap onto the next line based on available space, similar to how items behave in a shopping cart or a list of cards.
Staked Horizontal Bar Chart Lib
This package implements a simple stacked horizontal bar chart
Videos
Using Riverpod for the Counter App
Randal Schwartz demonstrates how to convert a traditional Flutter counter app into a RiverPod-based application. He explains the advantages of using RiverPod for state management, particularly for accessing state across different parts of an application. Randal walks through setting up a new Flutter project, integrating RiverPod, creating a notifier to hold state, and modifying the app to use RiverPod for managing the counter value. Follow along to see how straightforward it is to leverage RiverPod for global state management in Flutter apps.
Build a Flappy Dash Game Using Flutter and Flame
🎮 Welcome to the 3rd of our series on building a 2D game using Flutter and the Flame game engine! In this video, we will talk about the assets and parallax effect (for the background) 🚀 In this episode: We will import the assets such as the player sprite (image), and background layers. Then we use the ParallaxComponent to implement the background movement. So we have some background layers that move at different speeds based on their distance to the player or camera.
Flutter and Project IDX
What if your dev experience was completely in the cloud? What if your dev experience was always in sync with your team? What if your dev experience was boosted with AI? Enter Project IDX. Project IDX is an AI-assisted workspace for full-stack, multiplatform app development in the cloud. Come hear Emmett speak on Project IDX as it relates to your Flutter project!
Rewriting freezed with Macros | Observable Flutter #47
Watch as Craig Labenz and Rémi Rousselet discuss Rémi’s experience rewriting his infamous data class package, `freezed`, with Macros.
Thanks for reading Flutter Force. Flutter Force is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.
Thanks for reading and please don’t forget to follow from substack
