What is Flutter 2.0?

On March 3, Flutter Committed 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, a number of which with more than 150M+ users.

Want to know what Flutter 2.0 is about? Perhaps you would like to recap on the Flutter Engage otherwise you have missed a number of the opening sessions? In this article, we will explain why version 2.0 has been announced, what breaking changes it brings and how they affect your current apps and future projects.

Source: Flutter Engage Keynote

Want to know what Flutter 2.0 is about? Perhaps you would like to recap on the Flutter Engage otherwise you have missed a number of the opening sessions? In this article, we will explain why version 2.0 has been announced, what breaking changes it brings and how they affect your current apps and future projects. Here I will share with you a little deeper insight on all that those changes mean for the future of flutter.

Flutter 2.0 is bringing true cross-platform development to a replacement level. During Flutter Engage Google announced the discharge of the stable version of all 4 new platforms they’ve been performing on recently. The Flutter for Web has been promoted to the stable version, which was quite expected by the community as you’ll have read in our expectations for 2021. What is more, Flutter desktop versions of Windows, Linux, and macOS were also promoted to the stable channel under the early release flag. This comes as an enormous surprise because it required not only an incredible effort but also 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.

Source: Flutter Engage Keynote

From the technical point of view, the main change was to verify the sound null safety, which may be proof that no object references will have null or void values. This means that the tech debt Flutter incurred in its youth is fully paid and it paved the way for faster and more reliable development.

Flutter Engage was also an excellent 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 within the first place with 150M+ users.

In December 2019, we saw web support entering the Flutter beta channel. Today, the 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 a 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 steer you thru 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 figure with web — e.g. image_picker, google_maps, and some of the Firebase packages
  • URL strategies — solving the known problem of URLs on the web allowing also for building custom strategies for URLs
  • New scrollbars — fixed and updated, allowing 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 each one of the features and fixes is 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.

In this release, we’re pleased to announce that Flutter’s desktop support is out there within the stable channel under an early release flag. What this suggests is that we’re ready for you to offer it a try as a deployment target for your Flutter apps: you’ll consider 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 having the ability to prevent the 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.

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 foldable devices, which can be very demanding for designers and devs who want to support them independently.

Source: Flutter Engage Keynote

The Flutter support goes beyond the ordinary platforms. Today Tim Sneath announced a 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 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. AGL could also be 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 its promise and opens it to the community.

Null safety in Dart means a few of things. First, it makes every variable you declare a non-nullable type unless you explicitly indicate that it is often null. This is a really important fact because it makes your current code non-nullable by default. However, such a change has a particularly large impact on this codebase because it’s a serious pivot in how things work. That’s why your code is perhaps not getting to compile when using this new feature. Fortunately, the Flutter team was aware of that issue and prepared solutions for migrating to null safety. There is a politician migration guide Flutter docs. Also, the 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 would like to use null safety now, use `dart migrate` and check the guide for details.

Source: Flutter Engage Keynote

Another great point about null safety is being a really valuable constraint for the Dart compiler. The 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 within the code. The optimizations are often also visible in decreased app size. Null safety not only embraces developer experience and app performance but it implies tons of possibilities for Dart within the future. There are a couple of features that are awaited by the community for an extended time like data classes. With this critical null-safety feature, the 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. froze or json_serializable). The official roadmap mentions type aliases, static meta-programming (like in Rust or Swift), and generic metadata annotations.

The New Dart update brings also some minor improvements like the new UTF-8 decoder that is up to 20x faster than before.

Flutter 2.0 launches in parallel with Dart 2.12 which brings a lot of exciting features to the 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 stability 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.

Another great thing that has been announced during the Flutter Engage is the new tooling features. Tools are a very important part of the development experience and Flutter is known for being really good at this. This time isn’t different — the 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.

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.

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.

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.

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 KODE MAKERS 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 the article on https://kodemakers.medium.com/.