How Much Flutter desktop moves…?
Today, we’re pleased to announce the release of Flutter 2. It’s been a little more than two years since the Flutter 1.0 release, but in that short time, we’ve closed 24,541 issues and merged 17,039 PRs from 765 contributors.
Today, we’re pleased to announce the release of Flutter 2. It’s been a little more than two years since the Flutter 1.0 release, but in that short time, we’ve closed 24,541 issues and merged 17,039 PRs from 765 contributors. Just since the Flutter 1.22 release in September, we’ve closed 5807 issues and merged 4091 PRs from 298 contributors. Special thanks go out to our volunteer contributors who generously give their spare time to improve the Flutter project. The top volunteer contributors for the Flutter 2 release were xu-baolin with 46 PRs, a14n with 32 PRs that focused on bringing Flutter to null safety, and hamdikahloun with 20 PRs that improved a number of the Flutter plugins. But it’s not just coders that contribute to the Flutter project; a great set of volunteer PR reviewers were also responsible for reviewing 1525 PRs, including hamdikahloun (again!), CareF and YazeedAlKhalaf (who’s only 16!). Flutter is truly a community effort and we couldn’t have gotten to version 2 without the issue raisers, PR contributors, and code reviewers. This release is for all of you.
There are a lot of exciting things happening as part of the Flutter 2 release. For an overview of what’s new across Flutter 2 and Dart 2.12, as well as how our customers and partners are using Flutter 2, see Announcing Flutter 2. For a detailed look at Dart 2.12, see Announcing Dart 2.12. For how best to take advantage of Flutter web now that it’s recommended for production use, see Flutter web support hits the stable milestone.
And, to see what’s new in Flutter 2 itself, keep reading!
As of today, Flutter’s web support has transitioned from beta to the stable channel. With this initial stable release, Flutter pushes reusability of code to another level with the support of the web platform. So now when you create a Flutter app in stable, web is just another device target for your app.
Image for post
Moi Mobiili, a modern Mobile Virtual Network Operator striving for operational excellence through digitalization, chose Flutter to build their Mun Moi Account manager app and recently launched their web app.
By leveraging the web platform’s many strengths, Flutter built a foundation for building rich interactive web applications. We primarily focused on performance and improvements to our rendering fidelity. In addition to our HTML renderer, we added a new CanvasKit-based renderer. We’ve also added web-specific features, such as a Link widget, to make sure your app running in the browser feels like a web app.
Find more details about this stable release in Flutter’s web support blog post.
Sound Null Safety
Sound null safety is a significant addition to the Dart language, which further strengthens the type system by distinguishing nullable types from non-nullable types. This enables developers to prevent null error crashes, a common reason for apps to crash. By incorporating null checks into the type system, these errors can be caught during development, thus preventing crashes in production. Sound null safety is fully supported in stable as of Flutter 2, which contains Dart 2.12. For more details, see the Dart 2.12 blog post.
The pub.dev package repository already has more than 1,000 null safe packages published, including hundreds of packages by the Dart, Flutter, Firebase, and Material teams. If you are a package author, review the migration guide and consider migrating today.
In this release, we’re pleased to announce that Flutter’s desktop support is available in the stable channel under an early release flag. What this means is that we’re ready for you to give it a try as a deployment target for your Flutter apps: you can think of it as a “beta snapshot” that previews the final stable release coming later this year.
To bring Flutter desktop to this degree of quality, there have been improvements both big and small, starting with working to ensure that text editing operates like the native experience on each of the supported platforms, including foundational features like text selection pivot points and being able to stop propagation of a keyboard event once it’s been handled. On the mouse input side, dragging with a high precision pointing device now starts immediately instead of waiting for the lag needed when handling touch input. Also, a built-in context menu has been added to the TextField and TextFormField widgets for Material and Cupertino design languages. Finally, grab handles have been added to the ReorderableListView widget.
When it comes to trying the beta for Flutter desktop, you can access it by switching to the beta channel as expected as well as setting the config flags for the platforms you’re targeting according to the directions on flutter.dev. In addition, we’ve also made a snapshot of the beta bits available on the stable channel. If you use ‘flutter config’ to enable one of the desktop config settings (for example, enable-macos-desktop), then you can try out the beta functionality of the desktop support w/o having to go through the lengthy process of moving to the beta channel and pulling down all the latest beta of the Flutter SDK, building the tools, etc. This is great for giving it a try or using the desktop support as a simple “Flutter Emulator.”
However, if you choose to stay on the stable channel to access the desktop beta, you won’t get new features or bug fixes as quickly as switching to the beta or dev channels. So, if you’re actively targeting Windows, macOS, or Linux, we recommend switching to a channel that provides updates more quickly.
As we approach our first full production-quality release of Flutter desktop, we know we have more to do, including support for integration with native top-level menus, text editing that feels more like the experience of the individual platforms, and accessibility support, as well as general bug fixes and performance enhancements. If there are other things you think need doing before the desktop moves to production quality, please be sure to provide your feedback.
Platform Adaptive Apps: Flutter Folio Sample
Now that Flutter supports three platforms for production apps (Android, iOS, and the web) and three more in beta (Windows, macOS, and Linux), a natural question arises: how do you write an app that adapts itself well to multiple different form factors (small, medium, and large screens), different input modes (touch, keyboard, and mouse) and different idioms (mobile, web, and desktop)? To answer this question for ourselves as well as for Flutter developers everywhere, we commissioned the Flutter Folio scrapbooking app.
Announcing the new Flutter Folio app
Folio is meant to be a simple example of an app that you’d want to run well on multiple platforms from a single code base. And by “well,” we mean that it looks good on small, medium, and large screens, that it takes advantage of touch, keyboard, and mouse input, and that it works well for the idioms of the platform, (for example, by using links on the web and menus on desktop). We call this kind of app “platform adaptive” because it adapts well to whatever platform it’s running on.
If you’d like to see how you can make your own apps platform adaptive, you can check out the source code for Folio. In the future, expect to find docs and codelabs that explore this topic more deeply. In the meantime, check out Aloïs Deniel’s excellent blog post and video on this very topic.
Google Mobile Ads to Beta
In addition to Flutter desktop moving to beta, today we’re excited to announce an open beta for Google Mobile Ads SDK for Flutter. This is a brand new plugin that provides inline banner and native ads, in addition to the existing overlay formats (overlay banner, interstitial, and rewarded video ads). This plugin unifies support for Ad Manager and Admob, so no matter what size publisher you are, this plugin can be tailored to your scenarios.
Image for post
We’ve been piloting this plugin with some of our early customers in a private beta program, and many of them have successfully launched their apps with these new formats. For example, Sua Musica (largest Latin American music platform for independent artists with more than 15k verified artists and 10M MAU) launched their new Flutter app with the Google Mobile Ads SDK for Flutter plugin. They saw an 350% increase on Impressions with a 43% increase on CTR and 13% increase on eCPM.
This plugin is available for you to use today. As part of Flutter Engage, Andrew Brogdon and Zoey Fan presented a session on “Monetizing apps with Flutter” (available on the Flutter Engage site), where they talk about monetization strategies for apps built with Flutter, and how you can load ads in your Flutter app. Moreover, we created a new Ads page on flutter.dev where you can find all helpful resources such as the plugin implementation guide, the inline banner and native ads codelab, and the overlay banner, interstitial and rewarded video ads codelab. Please be sure to check them out!
New iOS features
Just because we’re continuing to increase the quality of support for other platforms, don’t think we’re forgetting iOS. In fact, this release brings with it 178 PRs merged that are iOS-related, including 23495, which brings State Restoration to iOS, 67781, which fulfills a long-standing request to build an IPA directly from the command line without opening Xcode, and 69809, which updates the CocoaPods version to match the latest tooling. In addition, a few iOS widgets have been added to the Cupertino design language implementation.
A new CupertinoSearchTextField offers the iOS search bar UI.
Image for post
The CupertinoFormSection, CupertinoFormRow, and CupertinoTextFormFieldRow widgets make it easier to produce validated form fields with iOS’s sectioned visual aesthetics.
Image for post
In addition to the feature work for iOS, we’re continuing to research performance improvements for iOS and Flutter in general when it comes to shaders and animation. iOS continues to be a premier platform for Flutter and we’ll continue to work to bring important new features and performance improvements.
New widgets: Autocomplete and ScaffoldMessenger
This release of Flutter comes with two additional new widgets, AutocompleteCore and ScaffoldMessenger. AutocompleteCore represents the minimal functionality required to get auto-complete functionality into your Flutter app.
Image for post
Autocomplete is an often-requested feature for Flutter, so this release starts to provide this functionality. You can use it today, but if you’re curious about the design for the complete feature, check out the autocomplete design document.
Likewise, the ScaffoldMessenger was created to deal with a number of SnackBar-related issues, including the ability to easily create a SnackBar in response to an AppBar action, creating SnackBars to persist between Scaffold transitions, and being able to show SnackBars at the completion of an asynchronous action, even if the user has navigated to a page with a different Scaffold.
Image for post
All of this goodness can be yours with a couple of lines of code that you should be using from now on to display your SnackBars:
final messenger = ScaffoldMessenger.of(context);
messenger.showSnackBar(SnackBar(content: Text(‘I can fly.’)));
As you might imagine, there’s more to it than that; for the details, check out an excellent video from Kate Lovett on ScaffoldMessenger.
Multiple Flutter instances with Add-to-App
We know from talking with many Flutter developers that a significant number of you don’t have the luxury of starting a brand new app but you can take advantage of Flutter by adding it to your existing iOS and Android apps. This feature, called Add-to-App, is an excellent way to reuse your Flutter code across both mobile platforms while still preserving your existing native code base. However, for those of you doing that, we’ve sometimes heard that it’s unclear how to go beyond integrating the first screen into Flutter. Interweaving Flutter and native screens makes navigation states difficult to maintain, and integrating multiple Flutters at the view level uses a lot of memory.
In the past, additional Flutter instances had the same memory cost as the first instance. In Flutter 2, we’ve reduced the static memory cost of creating additional Flutter engines by ~99% to ~180kB per instance.
Image for post
The new APIs to enable this are in preview on the beta channel and are documented on flutter.dev along with a set of sample projects demonstrating this new pattern. With this change, we no longer hesitate to recommend creating multiple instances of the Flutter engine in your native apps.
Whenever any framework matures and gathers users with larger and larger code bases, the tendency over time is to avoid making any changes to the framework API to avoid breaking an increasing number of lines of code. With over 500,000 Flutter developers across a growing number of platforms, Flutter 2 is quickly falling into this category. However, for us to continue to improve Flutter over time, we want to be able to make breaking changes to the API. The question becomes, how to continue to improve the Flutter API without breaking our developers?
Our answer is Flutter Fix.
Flutter Fix is a combination of things. First, there’s a new command-line option to the dart CLI tool called dart fixthat knows where to look for a list of deprecated APIs and how to update code using those APIs. Second, it’s the list of available fixes itself, which is bundled with the Flutter SDK as of version 2. And finally, it’s an updated set of Flutter extensions for the VS Code, IntelliJ,and Android Studio IDEs that know how to expose that same list of available fixes as quick fixes with little light bulbs that will help you to change the code with a click of your mouse.
As an example, let’s say you had the following line of code in your app:
Image for post
Creating a Flutter widget using a deprecated argument
Because the argument to this constructor is deprecated, it should be replaced with the following:
Image for post
Creating a Flutter widget with the deprecated argument replaced
Even if you’re familiar with all of the many Flutter deprecations, the larger the number of changes you have to make in your code, the harder it is for you to apply all of the fixes and the easier it is to make mistakes; humans are not great at these kinds of repetitive tasks. But computers are; by executing the following command, you can see all of the fixes we know how to make across your entire project:
$ dart fix — dry-run
If you’d like to apply them in bulk, you can easily do so:
$ dart fix — apply
Or, if you’d like to apply these fixes interactively in your favorite IDE, you can do that, too.
Image for post
While we’ve been marking old APIs as deprecated for a number of years now, now that we have a policy about when we will actually remove deprecated APIs, Flutter 2 is the first time that we’ve done so. Even though we haven’t yet captured all of the deprecated APIs as data to feed Flutter Fix, we continue to add more from previously deprecated APIs and will continue to do so with future breaking changes. Our goal is to do our best to make Flutter’s API the best it can be while also keeping your code up to date as we do it.
To make it clear that DevTools is a tool that should be used for debugging your Flutter apps, we’ve renamed it to be Flutter DevTools when it’s debugging a Flutter app. In addition, we’ve done a lot of work to bring it to production quality worthy of Flutter 2.
One new feature that helps you zero in on your issues even before you’ve launched DevTools is the ability for Android Studio, IntelliJ, or Visual Studio Code to notice when there’s a common exception and offer to bring it up in DevTools to help you debug it. For example, the following shows an overflow exception has been thrown in your app, which brings up an option in Visual Studio Code to debug the issue in DevTools.