๐ It's Live! ๐
After months of hard work, Flutter in Production is officially open for enrollment! ๐
I'm *super* excited to help you ship your Flutter apps with confidenceโwithout missing a step. ๐ฒ
๐ฅ 50% OFF for early accessโlimited time only! ๐ฅ
Did you know?
When you call `MediaQuery.of(context)` inside a build method, the widget will rebuild when *any* of the MediaQuery properties change.
But there's a better way that lets you depend only on the properties you care about (and minimize unnecessary rebuilds). ๐
Did you know?
You can now show the Debug Toolbar in the Command Center in VSCode. ๐
To do this, add the following line to the settings file:
"debug.toolBarLocation": "commandCenter"
Happy coding! ๐ป
Up until recently, it wasn't possible to check if a StatelessWidget was mounted in Flutter.
But since Flutter 3.7, BuildContext itself has a "mounted" property! ๐
This makes it easy to check if *any* widget is mounted.
That's a great quality-of-life improvement. ๐
Did you know?
Since Flutter 3.7, you can store all your API keys inside a JSON file and pass it to a new `--dart-define-from-file` flag from the command line.
(you'll want to add that JSON file to .gitignore to avoid exposing your sensitive keys)
Did you know?
Starting from Dart 2.17, you can pass arguments to the superclass with a new shorthand syntax. ๐
Works with both named and positional arguments. ๐
๐ฅย Just launched: a new GitHub repo with all my Flutter tips & tricks! ๐ฅ
Itโs 100% free and Iโll keep adding new tips! ๐
Go check it out. ๐
And if you find it useful, like and share this tweet so that others can learn too! ๐
We need to talk about FlutterFlow!
The company announced a $25.5M funding round, and thereโs a big market for it.
So, is FlutterFlow the real deal? Or should you ignore it and continue building apps the old-fashioned way?
Over the last week, Iโve taken it for a ride and
Riverpod offers 6 different kinds of providers, all suited for different use cases.
Knowing when to use each one of them can save you a lot of time and simplify your code. ๐
So let's take a look at them and learn when they are most useful.
Thread. ๐งต
What's the best project structure for medium/large Flutter apps?
Most likely, there's no "right" answer that works for all projects.
So let's explore two popular approaches known as "feature-first" and "layer-first" and learn about their differences.
Thread. ๐งต
Did you know?
The official Firebase docs now include Dart in the code samples! ๐ฅ
I've been waiting for ages to see this, and I'm so happy it's finally here! ๐
Did you know?
The easiest way to add a badge to an IconButton is to use the Badge widget.
Use cases:
๐ show a notification count
๐ฆ show a custom label
Works great with BottomNavigationBarItem and NavigationRailDestination, too. ๐
Did you know?
Since Dart 3, you can combine multiple variables into a record and replace if-else chains with a switch expression. โ
This is known as a switch matrix and lets you apply pattern matching to multiple values at once. ๐
Did you know?
Since Flutter 3.24, a new CarouselView widget is available.
Here's how to use it:
- Limit its height with a ConstrainedBox
- Set the children size with itemExtent and shrinkExtent
- Use any widgets as children
Easy peasy! ๐
Today it was my birthday!
My wife made a nice Tiramisu and my daughter decorated it with Flutter stickers. ๐
Super happy and grateful for all the good things and people I have in my life! ๐
My updated Riverpod 2.0 guide is now live! ๐ฅ
It is BIG, covering all the most important concepts and APIs.
I hope it will help you explore and get the most out of this great package!
If you find it useful, please retweet. ๐
I'm very happy to announce that I'm officially a Flutter GDE! ๐
I'll continue making Flutter tutorials, as usual. ๐น
But I'm also looking forward to contribute to the community in new ways in the coming months ๐
Looking for a new side project to impress your family & friends, using Flutter & ChatGPT?
I have a cool app idea but no time to implement it.
Feel free to take it from me. ๐
Thread. ๐งต
With Flutter, you can use a Container to combine painting, positioning, and sizing properties.
But should you?
As it turns out, Container doesn't have a const constructor.
So, consider replacing it with dedicated widgets that *do* have a const constructor. ๐
Did you know?
If you run some async initialization code *before* calling runApp() and an exception is thrown, the app will remain stuck on the splash screen. ๐ณ
To prevent this, wrap your code with a try/catch block and notify the user that something went wrong. ๐
I don't understand why some people are obsessed with Clean Architecture.
Sure - when you build complex apps, you want your code to be scalable, maintainable, and testable. And a good choice of app architecture can help immensely with these things.
But why blindly follow advice
What are some popular architectures that are suitable for Flutter App Development (and which one to choose)?
It boils down to what level of complexity you need to handle. ๐
Thread. ๐งต
My Flutter & Firebase courses has just passed $40K in lifetime earnings. ๐
It's amazing to think something I created has reached this milestone, especially since it was my first course.
A common requirement when working with maps is to:
- Update the value if a given key already exists
- Set the value if it doesn't
You may be tempted to implement some conditional logic to handle this.
But the update() method offers a simpler way of doing the same thing: ๐
I just started writing the last article of my Flutter App Architecture series.
I'm really looking forward to this one and hope to have it out on Thursday!
Happy coding!
Next month I'll launch 2.0!
I'll also build the home page with Flutter web, just for fun!
Wanna see a performance comparison of Flutter web vs the live site running HTML+CSS+JS?
If this tweet gets 300 likes, I'll make a YouTube video about it. Deal?
In a few hours I'll launch my Flutter animations course.
After 200+ hours building this, I'm super stoked to make it public.
I would really appreciate some retweets of the upcoming announcement. ๐๐
SVGs have some advantages over regular images:
- scalable without loss of quality
- smaller and more performant (for simple shapes)
But have you noticed that when you use SVGs in your apps, they don't always appear immediately?
To fix this, consider pre-caching them: ๐
Did you know?
In Dart, you can schedule a microtask when you want to complete a small async computation as soon as possible.
This will cause it to execute *before* any pending events in the event loop.
Here's my complete (5000+ words ๐คฏ) guide to Flutter Pagination with Riverpod, covering:
๐ infinite scrolling
โณ loading and error states
๐ refreshing data
๐ search UI with pagination
โจ caching & debouncing
โ edge cases & common questions
Did you know?
As of Flutter 3.24, a new "pub unpack" command is available.
You can use it to download a package locally and easily explore its source code.
That's a nice quality-of-life improvement! ๐
Work is well underway on my Riverpod 2.0 update. ๐ช
It's turning into a 5000+ word manuscript. ๐
I'll publish this after Riverpod 2.0 becomes officially available. ๐
Did you know?
Unused assets will increase your app bundle size, which is undesired.
To prevent this, you can install the "Find Unused Dart Files" extension for VSCode.
Then, simply run it from the command palette and remove all the unused assets, files, and dependencies. ๐
Dart 3.3 introduces a new feature called Extension Types.
Extension types are quite similar to extension methods.
But the key difference is that extension *types* hide away the interface of the underlying type. ๐
What's the difference between errors and exceptions in Flutter?
โ Errors are programmer mistakes. They are fatal and we should not try to recover from them
โ Exceptions are failure conditions that are out of our control. We should handle them and recover gracefully
Thread ๐งต
Tomorrow's article will be all about deep linking in Flutter, including:
โ Android & iOS platform setup
โ Handling deep links with GoRouter
โ Common gotchas and use cases
I can't wait to share it! ๐
If you don't wanna miss it, sign up here: ๐
8 Steps to Follow When Building Your Next Flutter App. โ
Starting a new Flutter app project can be a daunting task, especially when it's on you to make the technical calls.
Here are some key steps that helped me thrive as an indie dev, product owner, and tech lead.๐
Step 1:
Did you know?
As of Dart 3.5.0 (master channel), you can preview the experimental JsonCodable macro.
This macro *augments* your classes with fromJson and toJson methods, and it works in realtime as you edit your code (no code generation is needed).
When building non-trivial apps, following a *structured workflow* can bring great benefits and avoid many pitfalls.
Rather than diving straight into the code, here's a 6 step workflow that you can follow.
Thread. ๐งต
Last week, I published an updated article with a comparison of many popular Flutter app architectures:
- MVP
- MVVM
- Bloc Architecture
- Clean Architecture
- Stacked Architecture
- Android App Architecture
In case you missed it, here's the link: ๐
Want to create an "empty" Flutter project without all the boilerplate code?
Then simply pass a "-e" flag on the command line. Example:
flutter create -e test_app
This will generate minimal pubspec.yaml and main.dart files (without any comments). ๐
If your users speak another language, youโll need to localize your Flutter app ๐บ
Hereโs how to setup Flutter app localizations in just 5 minutes, using code generation.
Also covered: template vs non-template files and synthetic vs non-synthetic package. ๐
๐งต
Did you know?
OverflowBar makes it easy to layout your widgets in a row unless they overflow the available horizontal space, in which case they're arranged as a column.
Both the horizontal and vertical spacing are customizable, as well as the overflow alignment. ๐
Did you know?
Since Flutter 3.24, a new "Rebuild Stats" feature is available on the DevTools performance page.
Once you open it, simply use the app and the stats will update in realtime.
If you spot a widget that rebuilds too often, click on its location to go to the code.
Recently, I promised to write articles about the new language features in Dart 3.0.
And tomorrow, I'll share an (updated) article about exception handling with Result types and sealed classes.
If you don't wanna miss it, sign up here:
My Flutter Tips app is now live on the Google Play Store! ๐
๐ Over 150 Flutter tips
๐ Search Feature
๐ Offline mode
๐ Light/dark mode
Hope you'll find it useful. ๐
Real-world apps work offline!
So I just added caching & offline mode to my Flutter tips app! (courtesy of Drift/SQLite)
Took a bit of thinking to get it right, but I'm super happy with the result! ๐
Ever tried to force multiple Text widgets to have the same fixed width (e.g. with a parent SizedBox)?
Donโt do that, as this will break your layout when the text size changes.
Instead, use IntrinsicWidth and let Flutter calculate the right size for you. ๐
Did you know?
With the Vector Graphics Compiler, you can precompile SVGs at build time for better rendering performance.
To do this, install the vector_graphics_compiler package and use it as a transformer for each of your SVG assets.
Did you know?
The hugeicons package was recently released, featuring a collection of over 4,000 stroke Flutter icons.
If you're looking for an alternative to the standard Material icons set, give it a go. ๐
Two big milestones on Udemy this week!
- My Dart course reached $10,000 in total sales
- My Flutter & Firebase course reached $50,000 in total sales
Been live for 7 and 25 months respectively. ๐
Can GPT-4 and GPT-3.5 play Wordle? ๐ค
I decided to find out! Here's what I discovered:
โ GPT-4 understands the game and can improve on each move
โ GPT-3.5 doesn't quite get it ๐
Want to know all the details (prompt & answers)? Then read on! ๐งต
The Flutter "Fix All" command is great!
But you know what's even better?
Fix All on Save. ๐
Just add "source.fixAll" to "editor.codeActionsOnSave" on your VSCode settings and you're good to go!
Bonus: you can also include "source.organizeImports" to save even more time!
Three years into being a content creator, Iโm still earning less half of what I could with a software DEV job, but:
- Iโm doing what I love (coding & teaching)
- I have time for my family
- I can support them with my work
That is a true blessing!
Ever wanted to measure how long a network request takes in Dart?
This is easily done by creating a helper function that calculates the difference between two dates. ๐
When it comes to Flutter App Architecture, there is so much to learn and talk about!
So I just published an in-depth article about the repository pattern. ๐
And if you have any feedback, let me know in the comments. ๐
Quite impressed with the Material 3 Flutter WasmGC demo! ๐
Loads quickly and the UI is very snappy. โฑ๏ธ
Even gets a Lighthouse performance score of 79. ๐ฅ
That's much better than many bloated non-Flutter apps out there. ๐
My Flutter REST API Course is FREE for a LIMITED TIME only! ๐
I've never done this before! ๐ค
Get it while it's hot, time is ticking! ๐ฅ
#FlutterDev
#dartlang
RT please ๐
Did you know?
If your Flutter app has multiple flavors, you can put all the Firebase initialization logic in one file.
How? Define aliases for the config files and switch between them based on the appFlavor constant. ๐
Then, simply call initializeFirebaseApp() from main().
Did you know?
You can easily add gaps inside Flex widgets such as Columns and Rows or scrolling views.
Just install the `gap` package, and replace all those pesky SizedBoxes!
To date, there haven't been any *comprehensive* guides for shipping Flutter apps in production.
Time to change that.
(big announcement coming tomorrow)
It's time to announce my upcoming course. ๐
I designed this for folks who want to ship and monitor their Flutter apps in production, without overlooking important details.
If that sounds like you, check this page for all the details:
Did you know?
CancelToken lets you cancel HTTP requests on demand.
It's great for optimizing network usage, improving UX, and handling timeouts.
Use it to stop unnecessary data fetches when users navigate away or to implement "cancel" buttons in your Flutter apps.
Ever needed to return an empty box (that takes no space) in Flutter?
There's a widget for that โ SizedBox.shrink()
This is more performant than returning an empty Container (which is complex inside and can't be declared as a const widget).
After spending several months writing a full-stack Flutter project for my upcoming courses, today I have started writing the content (and will soon begin recording ๐น).
This got me thinking about WHY I wanted to make these courses in the first place.
And this is it. ๐
Did you know?
You can use BoxHeightStyle to change the selection height style of a TextField.
This is quite useful in apps where you can enter emojis and text in multiple languages. ๐
๐ Celebrating the stable release of Flutter 1.0! 5 years ago, we started with iOS and Android. Thanks to our incredible community, Flutter has blossomed! ๐ So for our
#ThanksFlutter
, we're grateful for such an awesome community! High-five a fellow Flutter dev ๐
#Flutterturns5
My Ultimate Guide to Deep Linking in Flutter is here! ๐ฅ
โ Android + iOS platform setup & testing
โ Common gotchas and use cases
โ Handling deep links with GoRouter
โ Guards and redirection with query parameters
Read on for all the details. ๐
My Flutter app architecture series has been very popular, and many developers have been using it in their apps.๐
So I've decided to revisit and expand it with these two articles, which will be out tomorrow. ๐
If you don't wanna miss them, sign up here:
Time to share my latest article, which is all about data fetching and mutations with Riverpod. ๐
I spent quite a bit of time designing nice diagrams for this one, and I hope you'll find them helpful. ๐
Read on for all the details. ๐
Ever needed a force update prompt that is controlled remotely?
There's a package for that: force_udpate_helper
This works by comparing the *current* app version with a *required* app version that is fetched from a remote source.
Do you have a lot of code-generated files and want to hide them by default the project explorer?
Just enable file nesting in the VSCode settings and you're good to go! ๐
Very useful if you use build_runner, Freezed, or json_serializable in your Flutter apps. ๐
When building a "search-as-you-type" feature, you need to strike the right balance between two things:
- show the results quickly
- avoid excessive calls to the server API
This can be accomplished with a so-called debouncer.
Here's a thread showing how to implement this. ๐งต
Did you know?
Apps created with Flutter 3.22 use a new, faster web bootstrap process.
The easiest way to upgrade your existing apps is to delete the web folder and recreate it again with the Flutter CLI.