What a month this has been for Flutter!
From the launch of Flutter 3.7 (which is already a huge release on its own) to all the announcements made at Flutter Forward, there's so much good stuff to be excited about.
And beyond all the news from the Flutter team, ServerPod 1.0 was released, Zapp Editor got a bunch of new features, and I've got many more things to share.
So if you've missed all the action or want to catch up, here are all my top picks! π
Flutter Forward
As stated explicitly on the updated 2023 roadmap, the top priority of the Flutter team is to improve performance.
And thanks to the new Impeller engine (Flutter's new rendering backend), it will be possible to completely eliminate shader compilation jank and enable 3D rendering.
There is also ongoing work on supporting Wasm as a target, which can outperform JS in many performance-critical scenarios.
Beyond that, the upcoming FFIgen and JNIgen tools will allow us to generate code bindings and communicate with iOS and Android APIs directly from Dart without using platform channels.
All this and much more was announced during the Flutter Forward keynote and the companion article on Medium about what's next for Flutter.
And if you're looking for a quick summary, here's a 7-minute video about the most important things to know:
π» Flutter Element Embedding Demo
My favourite part of the keynote was this mind-blowing demo about Element Embedding, which allows Flutter content to be added to any standard web <div>, enabling the use of CSS selectors and transforms, and seamless interoperability between JavaScript and Dart code:
The demo is seriously cool - but we're just getting started. π
So here's a selection of my favourite videos from the Flutter Forward Playlist. π
π¬ Dart 3 Alpha & Bringing pattern matching to Dart
During Flutter Forward, a new major version of Dart was announced. This will add support for records and patterns and unlock many useful features like multiple returns, destructruring, usable switches, sealed classes and more.
The official announcement contains all the details:
And if you want to learn what code you'll be able to write with Dart 3, watch this video:
π¬ Flutter Forward - Making UI Animation Easy & Fun
If you're into animations, you'll certainly want to check the flutter_animate package by the gSkinner team. This makes it possible to create complex animations with a few lines of code, just like in this example:
Text("Hello World!").animate()
.fadeIn() // uses `Animate.defaultDuration`
.scale() // inherits duration from fadeIn
.move(delay: 300.ms, duration: 600.ms) // runs after the above w/new duration
.blurXY() // inherits the delay & duration from move
This library was developed while building the Wonderous app (which now uses the latest Impeller engine).
For a great overview of what you can do with it (along with some performance tips), watch this video:
π¬ Canvas.drawVertices β Incredibly fast, incredibly low-level, incredibly fun
If you wanna learn how to draw stuff really fast with Flutter, you need to learn about some low-level canvas APIs.
These APIs are very powerful but hard to explain in the documentation alone.
So here's a very in-depth video where Filip HrΓ‘Δek shows us how to draw futuristic interactive UIs with great performance:
π¬ Top cloud development tips for Flutter developers
Most Flutter apps need a backend, but Firebase is not always the best choice and sometimes a custom backend makes more sense (even better if it's written in Dart).
So here's a great video explaining what libraries you can use for your Dart backend, how to deploy and run it using Google Cloud, choose the right database, deal with authentication and file storage, and much more:
π¬ Prototyping beautiful designs with Flutter
One great strength of Flutter is how we can combine different APIs to create completely custom UIs.
For example, we can create custom Text widgets with multiple font variations, animate them, and apply post-processing effects using GLSL shaders.
And this video is yet another example of how Flutter can help us bring ambitious designs to life:
π¬ Preview: Two-dimensional scrolling in Flutter
When it comes to scrolling content in one dimension (horizontally or vertically), Flutter already gives us all the APIs we need.
But for now, Flutter doesn't offer any widgets to render tables and trees efficiently with full two-dimensional scrolling support.
And this video explains what it takes to enable this, along with a preview of the new TableView and TreeView widgets that will be available in the future:
π¬ Adaptive UI for a multiplatform world
If you want your apps to be truly adaptive, you have many factors to consider:
- how to deal with different input sensors and devices (keyboard, mouse, touch screen, trackpad)
- how to react to environmental changes (using
MediaQueryandLayoutBuilder) - how to offer platform-specific capabilities like adaptive context menus for text fields and cascading menus on desktop
This video offers a good overview of all the above, along with a preview of the new flutter_adaptive_scaffold package:
π¬ What is Impeller?
Skia has been the default rendering engine in Flutter since the beginning, and its replacement (called Impeller) has been in the works for some time.
Impeller was built to completely eliminate shader compilation jank and enable 3D rendering and has been a major area of focus for the Flutter team.
And this video offers a great deep dive into what it takes to build a rendering engine that unlocks new levels of performance while using fewer shaders:
π¬ Control your Flutter app on the fly with Firebase Remote Config
Firebase Remote Config is a powerful tool you can use to enable many real-time features in your Flutter app, including:
- App configuration values
- Notifying users about a new app version
- Feature flagging
- Staged roll-outs
- A/B testing
And in this video, Mangirdas Kazlauskas shows us how to implement all the above using a Flutter Forward agenda app as a demo:
What's more, he also published the same as a written article on his own site. Not to be missed:
The videos above were my top picks. Check the Flutter Forward Playlist to discover all the remaining ones. π
Flutter 3.7 Stable
Flutter 3.7 was truly a gigantic release, bringing enhanced Material 3 support, menu bars and cascading menus on desktop, a new Impeller preview on iOS and much more:
Alongside Flutter 3.7, Dart 2.19 was also released, with improved support for isolate management:
Other Flutter News and Articles
With all the major announcements from Flutter Forward, it would be easy to miss the remaining news from the Flutter community.
But I've been paying attention and have some more interesting things to share. π
π¬ Serverpod 1.0 Release Keynote
Serverpod is becoming one of the most prominent solutions for server-side Dart.
And this 1.0 release is a major milestone, featuring world-class logging, a revolutionary ORM, built-in caching, and more.
Serverpod makes it easy to talk to a remote database with full type safety. It also comes with tooling for analyzing your server-side code and generating the corresponding client-side APIs (which is a huge time saver!).
For all the details, watch this:
𧱠Riverpod Lint
If you're a Riverpod user, you'll want to take advantage of the new Riverpod Lint package, which makes it easy to convert between different widget types:
The package is built on top of custom_lint, and ships with some useful lint rules that can be individually configured in the analysis_options.yaml file.
For the full documentation and list of supported rules, check the official page:
π¬ Coding Riverpod with creator of Riverpod, Remi Rousselet
Speaking of Riverpod, here's a recent Flutter Original episode, where Majid Hajian interviewed its author, Remi Rousselet.
The interview discusses the journey that led to the creation of the Provider and Riverpod packages, and includes a pair programming session showing how to use Riverpod in practice:
π Simplifying flavor setup in the existing Flutter app: A comprehensive guide
Many guides have already been written about how to add multiple flavors when creating a new Flutter app.
But if you already have an existing app with platform-specific configuration, adding flavors can be a challenging process that is best done manually.
And this step-by-step guide by Sailesh Dahal covers all the details for creating customized builds on iOS and Android:
π Flutter 3.7 and a new way of defining compile-time variables
A few months ago, I wrote an article about how to store API keys in Flutter, showing how we can use --dart-define to define compile-time variables.
But --dart-define is quite clunky when you have many different variables.
The good news is that since Flutter 3.7, we can store all the variables inside a json file and pass it to a new --dart-define-from-file flag from the command line, and this article covers all the details:
Latest from Code with Andrea
Since the last edition, I have published two new articles. π
π How to Navigate Without Context with GoRouter and Riverpod in Flutter
Ever wanted to navigate to a new route without using a BuildContext?
This is very useful when your routing code depends on some business logic that should be separate from the UI.
And this article explores three different navigation techniques, along with their tradeoffs:
π How to Check if an AsyncNotifier is Mounted with Riverpod
Since Flutter 3.7, it's easy enough to check if any widget is mounted using context.mounted, as I have explained here.
But when you're inside an AsyncNotifier, things get more tricky, and there's no equivalent solution.
And in this article, I explore some possible approaches and their tradeoffs:
Until Next Time
Phew, this was a big issue, and there was a lot to digest! π
But it's clear that Flutter continues to build momentum, and I can't wait to see all the 2023 roadmap features make it to the stable branch soon. π
Happy coding!
