Flutter 2 Is Here: All You Need to Know After Flutter Engage.
written by Mateusz Wojtczak, Jakub Wojtczak, Robert Odrowąż-Sypniewski and Łukasz Kosman from LeanCode.
What is Flutter 2.0?
On March 3, Flutter Engage took place, an event organized by Google to celebrate the arrival of the new version of Flutter, a cross-platform framework responsible for over 150k iOS and Android apps, some of which with more 150M+ users.
Want to know what Flutter 2.0 is about? Perhaps you want to recap on the Flutter Engage or you have missed some of the opening sessions? In this article we will explain why the version 2.0 has been announced, what breaking changes it brings and how they affect your current apps and future projects. Last but not least we will share with you a little deeper insights on what all those changes mean for the future of Flutter.
Support for 6+ platforms
Flutter 2.0 is bringing true cross-platform development to a new level. During Flutter Engage Google announced the release of the stable version of all 4 new platforms they’ve been working on recently. The Flutter for Web has been promoted to the stable version, which was kind of expected by the community as you may have read in our expectations for 2021. What is more, Flutter desktop versions of the Windows, Linux and MacOS were also promoted to the stable channel under early release flag. This comes as a big surprise, as it required not only a tremendous effort, but also a sound support from new Flutter partners: Microsoft and Linux, represented here by Canonical — the publisher of Ubuntu. You’ll find more on those platform updates later in this article.
Sound null safety confirmation
From the technical point of view the major change was to confirm the sound null safety, which is a mathematical proof that no object references will have null or void values. This means that the tech debt Flutter incurred in its early days have been fully paid and it paved the way for faster and more reliable development.
More than 150K apps in Flutter
Flutter Engage was also a great moment to showcase some proof that Google is taking things seriously with Flutter. Not only have they mentioned new strategic cooperations with Microsoft and Ubuntu, but also presented new embedded car systems from Toyota and offered great cases of their own apps rebuilt with Flutter, with Google Pay in the first place with 150M+ users.
Flutter Web is now stable
In December 2019, we saw web support entering Flutter beta channel. Today, web goes stable together with 5 other platforms. This means you can use Flutter Web straight after installing Flutter 2.0 without any additional work. The newest release was prepared with focus on three important app scenarios:
- PWAs — Progressive Web Apps
- SPAs — Single Page Applications
- Adding web support to existing Flutter applications.
A lot of web-related work has been done regarding this release, but here are some key elements to walk you through it:
- CanvasKit renderer — allowing Flutter web apps to be rendered using high-performance Skia + WebAssembly engine
- PWA support — this means automatically generated manifest file and service worker setup
- Keyboard shortcuts can now automatically be used for scrolling — this also works for desktop apps
- Most popular Flutter plugins updated to work with web — e.g. image_picker, google_maps and some of the Firebase packages
- URL strategies — solving known problem of URLs on web allowing also for building custom strategies for URLs
- New scrollbars — fixed and updated, allowing for interactions, theming and customizing scrollbars
- Desktop accessibility — Flutter generates a semantic DOM tree, which allows for using accessibility tools like VoiceOver or TalkBack. This also adds screen reader support for Flutter web apps
- Modern browsers support — Flutter team constantly ensures that all of the features and fixes are supported on all modern browsers when becoming available.
New text renderer — brand new canvas-based text renderer improves significantly text support on the web. This includes rich text and browser features like selecting, copying, pasting and auto-filling now supported also in Flutter web apps.
Desktop platforms stable with the early release flag
This comes rather as a surprise. Flutter team decided to announce stability on all desktop platforms.
This means that one product team can be responsible for all digital interfaces of the most complex products. Why do we call this announcement a big surprise? This is mostly because the works on those different platforms were complex and totally independent, with different roadmaps and progresses. A year ago, the MacOS support was considered the most advanced among platforms as it has benefited from the extensive iOS support and its alfa version has been released during the previous major product event, Flutter Interact in December 2019. At that time both Windows and Linux were in their infancy, with some initial public statements coming in the middle of 2020 from Canonical which enabled Ubuntu desktop support. Microsoft was also mentioning the potential cooperation before, but the scale of the partnership was limited to the support for Surface Duo and the Flutter Engage announcement sheds new light on the effort behind the Windows official support. The Flutter Desktop should be still considered as a release candidate or as Google says a “beta snapshot”, but the official support from both Microsoft and Canonical can make it final really soon.
The Flutter Linux version release is accompanied by some additional announcements. Flutter has officially become the number one UI tool for future apps running on Ubuntu, thereby bringing Yaru, the community based theme suite, to Flutter.
Dual-Screens and Foldables revolution
The cooperation with Microsoft is not limited to the support for the Windows Flutter version. The two tech giants partnered together during the release of the first-ever Microsoft device running Android, Surface Duo, which newest version was announced on March 1. During the Flutter Engage Microsoft published some major pull requests enabling the support for those complex devices. This step was rather unexpected given the recent announcement of the .NET Multi-platform App UI (MAUI) during the BUILD 2020, which is based on Xamarin Forms — Flutter competitor from the Microsoft world. This support also means that other manufacturers, like Samsung, can now take advantage of this upgrade helping Flutter become the new standard for the foldable devices, which can be very demanding for designers and devs who want to support them independently.
You can read more about the support for hinge and fold type of devices in the recent Microsoft post.
With the advent of official support for web and desktop apps in Flutter (MacOS, Windows and Linux) we can see a new type of apps on the horizon — Platform Adaptive Apps. In this kind of app developers need to consider the norms, user expectations, input devices and idioms for each platform. Developers from GSkinner prepared a showcase app proving that now it’s possible to write a single Flutter app supporting all six platforms — Flutter Folio. We are used to the fact that apps should support different screen sizes and layouts for different platforms. What is new about this app is the fact that it also allows us to use platform-specific features such as keyboard shortcuts, mouse wheel zooming and right-click menus for desktop apps, multi-select for tablets or camera on the mobile. The app is open source, you can find its source code here.
Not only 6 platforms — Flutter Embedded for AGL
The Flutter support goes beyond the ordinary platforms. Today Tim Sneath announced partnership with Toyota, which decided to build the next-gen vehicle infotainment system (in-car entertainment) using Flutter. They decided to use Flutter because it guarantees the control over driver experience which is vital for car manufacturers. High performance, smartphone-tier touch mechanics, development experience and quicker feedback loop were other arguments mentioned. This all led Toyota Team to use Embedder API to build Flutter support for AGL, which stands for Automotive Grade Linux. AGL is a special Linux distribution for automotive applications, which was launched in 2012 with founding members including Jaguar Land Rover, Nissan, Toyota, DENSO Corporation, Fujitsu, HARMAN, NVIDIA Renesas, Samsung and Texas Instruments (TI). As an open source project, similar to the case of Microsoft and Foldable devices, this can set the standard for the whole automotive industry if Toyota keeps their promise and opens it to the community.
Flutter 2.0 launches in parallel with Dart 2.12 which brings a lot of exciting features to developer experience. Probably the most important thing is the long-awaited stable version of sound null safety (also known as NNBD — non-nullability by default). Another feature that comes to stable is FFI — Foreign Function Interface that was introduced in Dart 2.5 but now becoming mature enough to be announced stable. FFI enables interoperability with C libraries, which means you can use something low-level like OpenCV in your Flutter application.
Null safety in Dart means a couple of things. First, it makes every variable you declare a non-nullable type unless you explicitly indicate that it can be null. This is a very important fact because it makes your current code non-nullable by default. However, such a change has an extremely large impact on the present codebase because it’s a major pivot in how things work. That’s why your code is probably not going to compile when using this new feature. Fortunately, Flutter team was aware of that issue and prepared solutions for migrating to null safety. There is an official migration guide on Flutter docs. Also, Dart team has decided not to enable null safety automatically yet, it will happen when most of the package ecosystem is migrated successfully. If you want to use null safety now, use `dart migrate` and check the guide for details.
Another great thing about null safety is being a very valuable constraint for the Dart compiler. Compiler can optimize your code much better if it doesn’t need to check for nulls all over the place. That means your app is even faster than before while using null safety in the code. The optimizations can be also visible in decreased app size. Google Pay app’s code size was reduced by 14% when using the `flutter-sizeopt` tool for optimizing Flutter application size.
Null safety not only embraces developer experience and app performance but it implies a lot of possibilities for Dart in the future. There are a few features that have been awaited by the community for a long time like data classes. With this critical null-safety feature, Dart team can approach those proposals in a better way. Also, as Bob Nystrom said during the keynote, the team looks for improving metaprogramming features that now are mainly resolved by using code generation (e.g. freezed or json_serializable). The official roadmap mentions type aliases, static meta-programming (like in Rust or Swift) and generic metadata annotations.
New Dart update brings also some minor improvements like the new UTF-8 decoder that is up to 20x faster than before.
Another great thing that has been announced during the Flutter Engage is the new tooling features. Tools are a very important part of development experience and Flutter is known for being really good at this. This time isn’t different — Flutter team has delivered a new `flutter fix` migration tool, Dart null-safety migration command and exciting improvements to existing Dart DevTools.
Flutter is a constantly changing framework, so as a developer you could find yourself in a situation when you look into your old project and see an ocean of deprecation warnings. No worries — now you can use `flutter fix` or `dart fix`. It goes through your code in search of such quick-fix analysis errors that can be presented to the developer and eventually automatically fixed. This one is also integrated with IDE plugins — IntelliJ support was presented during the keynote.
Dart null-safety migration tool
As already mentioned in the null-safety paragraph, new Dart breaking changes come with a migration tool. If you want to try migrating to null-safety, you can run the `dart migrate` tool.
It should produce an output similar to this:
When you go to that URL, you will see the new migration tool in the form of a web app, which walks a developer through the migration process with an intuitive UI for applying changes.
Dart DevTools updates
There are a couple of updates made to Dart DevTools in order to improve the developer experience:
- Inspecting overflowed widgets straight from the error message — now you don’t have to search for the broken widget yourself. This change shortens the process of inspecting an overflowed widget just to a button click in the IDE error popup
- Developers now can also see fixed sized widgets in Layout Explorer — until this you could only see flex layouts there
- A lot of minor improvements to specific DevTools tabs.
Monetizing the Flutter apps now possible with AdMob
The new official ads package — google_mobile_ads has been released for public beta. The new package unifies integration with AdMob and Ad Manager. It also introduces support for new ad formats such as native ads and improves banners by allowing for embedding in the widget tree. Previously using firebase_admob banners could be only overlaid over the app’s content. Using the new package ads can be inserted as normal widgets they can scroll and interact much better with the app’s layout. Unfortunately while very well optimized, the new package still uses PlatformView for the rendering of native ads which affects apps performance. However, the switch to rendering ads using Flutter is likely to be at least partially blocked by ad framework policies requiring rendering using specific platform UI elements.
Future is bright for Flutter
During Flutter Engage Google Team left no doubts that the tech giant is betting hard on Flutter, investing heavily in its development, migrating the existing products to Flutter and bringing new allies, as unexpected as Microsoft, to chase the vision of one app for all platforms from mobile, through web and desktop to new foldable devices and automotive. Although it took Google several years to build this momentum, now Flutter seems almost unstoppable and we will soon witness this great vision coming true.
At LeanCode we are satisfied with this outcome and the fact that Flutter is pushing the boundaries of the product development. If you’d like to learn more about our experience with Flutter so far check out article on Lessons learned after making the first 10 commercial apps in Flutter.
If you are interested in taking advantage of our team of 12+ Flutter Developers or other devs & product specialists, don’t hesitate to contact us at firstname.lastname@example.org.