Google announces Flutter 1.12 with support for web, macOS, and more

Posted by Chris Sells, Product Manager, Flutter developer experience

Today we’re pleased to announce version 1.12, the latest stable Flutter release. This makes 5 stable releases since our 1.0 release in December, 2018. It’s been an amazing year! We’ve closed 5,303 issues and merged 5,950 pull requests from 484 contributors. In the Flutter engine and framework, we’ve added support for Android App Bundles, iOS 13, implemented mouse and keyboard events, released the In-App Purchase plugin, merged several important performance improvements, localized for 24 additional locales and created several new widgets. Furthermore, the Flutter tools have seen a great deal of improvement as well, with the release of Dart DevTools, which provides the widget inspector, memory and CPU profiling, and enhanced logging that can be used regardless of your editor/IDE of choice. Also, we’ve added auto-import of packages for referenced types, explicit ChromeOS support, UI Guides to make your build methods easier to read and write, and improved error messages with formatting, colors and more actionable wording.

And with each release, we’ve said the same thing — that we’re just getting started. This continues to be true in this, our biggest release yet, coming from 188 contributors, closing 4,571 issues and merging 1,905 PRs. As in previous releases, enhancements abound for both the Flutter framework, and the tooling.

Flutter framework

This release includes a visual refresh to support iOS 13 that includes completed implementation of Dark Mode, new Cupertino widgets, several UX tweaks, and a greatly enhanced Add-to-App experience.

iOS 13 dark mode completed

More big news in Flutter 1.12 is the completion of our work to support the iOS 13 look and feel. This includes complete dark mode support in the Cupertino widgets.

If you’ll notice in the screen shots above, dark mode support is much more than just swapping out the background color, but also adapting the rest of the colors to be a good match. Such deep attention to dark mode was a huge amount of work, but worth it to get pixel-perfect iOS design support across both dark and light mode.

Also, in our continuing goal for pixel-perfection for iOS 13, we’ve added two new widgets.

And finally, in our quest to make a Flutter app feel as well as look native on iOS 13, we’ve improved scrollbar fidelity, provided for adaptive CupertinoAlertDialog padding, and allowed for min/max date constraints on the CupertinoDatePicker.

Add-to-App updated

Another improvement in our mobile support is an update to Add-to-App, which is the ability to integrate Flutter into an existing Android or iOS app. Here, we’ve been working on simplifying the integration flow to make adding a Flutter library to your app a better experience, including the addition of a new Flutter Module wizard in Android Studio.

With Flutter 1.12, Add-to-App is now officially supported for adding one fullscreen Flutter instance to your app. In supporting this functionality, we’ve also:

• Stabilized the APIs for platform integration in Java, Kotlin, Objective-C and Swift, including a new set of APIs for Android. See the Android project migration docs for details on changes.
• Added support for using plugins in embedded Flutter modules.
• Provided additional integration mechanisms via Android AARs and iOS Frameworks for better compatibility with existing build systems.
• Reworked the ‘flutter attach’ mechanism on the command-line tools, VSCode and IntelliJ plugins to easily attach onto a running Flutter module for debugging, DevTools and hot reload.

To try Add-to-App, see the website documentation or browse our sample projects demonstrating various integration scenarios.

Dart 2.7

Of course, everything we do in Flutter is based on Dart, so if you haven’t already read about extension methods and safe string handling (including emojis), or want an update on null safety using non-nullable types, you can find that information in the Dart 2.7 announcement.

Beyond Flutter 1.12 stable

At the same time that Flutter is getting new features in the stable channel, it’s also getting new features beyond what you can do in stable, specifically a beta release of web support and an alpha release of macOS support.

Web support available in beta

The Flutter 1.12 master, dev and beta channels all provide improved support for web.

One happy customer of Flutter on the web is Rivet, pictured above. Rivet is an education project that currently has a mobile app in production. They’re using Flutter and Firebase to build a web version of their app that they plan to launch in early 2020.

You can learn more about what other customers are doing with Flutter’s web support as well as the rest of the details in the Flutter web blog post.

macOS moving to alpha

macOS desktop support isn’t far behind, moving from tech preview to alpha, available now in both master and dev channels.

Pictured here at desktop size is a new version of the Flutter Gallery that’s been completely updated to support macOS in addition to Android, iOS, and web.

The macOS alpha represents a big step forward for Flutter’s desktop support, including the new DataTree and Split sample widgets, several plugins ported to macOS, support for building in both release and profiling mode, and a greatly simplified tooling story. If you’re running from the dev or master channel, you can gain access to the macOS tooling by enabling macOS desktop support in Flutter’s system-wide config:

$ flutter config — enable-macos-desktop

Creating a Flutter project that runs on macOS is now just like creating any other new Flutter project with ‘flutter create’.

In addition to the tooling support, we’ve also been working on the density that’s appropriate for desktop-sized apps. Mobile apps need relatively large controls to accommodate touch interactions whereas on desktop-sized devices, a user is more likely to be using a mouse. In bringing Flutter to the desktop, we’ve worked on allowing you to choose the density of your widgets to better accommodate the needs of your desktop users:

And finally, to improve the experience of Flutter desktop apps, we’ve done a lot of work on keyboard navigation and keyboard access, including:

• synchronizing modifier keys with key events
• managing item selection when a dropdown is opened
• adding a convenience accessor for primary focus
• adding keyboard navigation, hover and shortcuts for switches
• checkboxes and radio buttons
• automatic scrolling to keep focused items in view
• keyboard shortcut-based scrolling
• a new widget for handling focus and hover
• rewritten copy/paste and keyboard selection
• keyboard navigation of dropdowns
• visual density support
• adding macOS function key support

In addition to the Flutter Gallery sample, we also recommend the new Photos Search sample, which shows off a lot of desktop goodness, including keyboard handling, the new widget density, the new plugins, and the new widgets.

For those of you curious about progress on Windows and Linux, they’re still in technical preview, but both benefit from a lot of the work to get macOS to alpha. We’ll share the updates to those platforms soon. For more details of where we are with desktop support in Flutter for macOS, Windows and Linux, please see flutter.dev/desktop.

Flutter tooling

In addition to the Framework and Engine, we also have a lot to talk about for Flutter tooling. This includes a new version of DartPad with support for Flutter, augmented IntelliJ-based IDEs with a preview of a new feature we’re calling “Hot UI”, enhanced Dart DevTools with a new visual layout view, enabled simultaneous multi-device debugging in Visual Studio Code, improved the Android build process and better support for finding differences in rendered widgets between test runs.

DartPad loves Flutter

If you aren’t already using DartPad, you should try it out! It’s a great way to try Dart features without installing anything. Furthermore, with the new release of DartPad, now you get Flutter, too!

The new DartPad leverages Flutter’s web support so that when you’re writing Flutter code on the left, you’re running a real, live Flutter (web) program on the right. The chief difference is that using DartPad, you can get started with Flutter without installing a thing.

In addition to the stand-alone DartPad playground, we’ve also started adding DartPad with Flutter support into our docs and in our codelabs (like Basic Flutter layout concepts and Implicit animations), so that you can learn about Flutter from the comfort of your browser. For more information on DartPad, please check out our DartPad announcement post.

Build your widgets inline with Hot UI

If you install the Flutter tools locally on your own machine (and we hope you will), you’ll find a new feature previewed in the IntelliJ/Android Studio plugin for Flutter. It allows you to see and interact with your widgets directly in your IDE as you’re building them.

We call this feature “Hot UI” and, like Hot Reload, as you make the changes in your code, it updates the hosted UI directly. You can also interact with the hosted UI (like changing a color, as shown here) and that change goes directly into your code. To enable the Hot UI preview, you can read the instructions on the Flutter wiki.

Debug layout issues with the Layout Explorer

Whether you write the code by hand or let Hot UI write it for you, you’ve still got code and sometimes code has issues. Helping you track down and fix your issues is exactly why Dart DevTools was invented. In this new version of DevTools, we’ve added a feature called the “Layout Explorer” to augment the Inspector with a visual representation of your layout.

Not only does the Layout Explorer help you to visualize the layout of the widgets in your running app, but if you’d like to experiment with changing the layout options, it allows you to do so interactively. We’re hoping the preview of this feature helps make it easier to understand and fix your layout issues. To enable this feature, see the Layout Explorer docs.

Multi-device debugging

When you’ve built and debugged your Flutter UI, you have most likely done it on a single device. Wouldn’t it be nice to be able to debug your app across multiple devices (physical or virtual) at the same time? With Flutter’s support for multi-session debugging in Visual Code, that’s just what you can do.

Here we’ve got the same Flutter app running simultaneously on three separate debugging sessions. If we make a change in the code, Hot Reload makes sure that it’s reflected in all three apps. If we set a breakpoint, whichever app triggers that code gets stopped. If you’d like to stop debugging one, you can do so without stopping them all. You can learn how to configure this feature for multiple device debugging on the wiki.

Android build improvements

And finally, to continue to improve Android, we addressed some build problems in this release. Firstly, we made the Android build more robust, specifically around combining plugins using Support Libraries and those using AndroidX. We did this by moving the Flutter team’s plugins to AndroidX and we recommend that apps and plugins move to AndroidX as well. However, for plugins that haven’t yet moved, if there is a build problem, we have an alternate code path in our build that uses Android Archive files and Jetifier. The build is slower, which is why it’s not the primary build mechanism, but we find that it solves about 95% of the build problems we’ve encountered.

Another issue we addressed was deprecating Proguard in favor of R8, the new code optimizer from Google. Before this release, the app author had to configure ProGuard rules manually using guidance provided by the plugin author. In this release, plugins can define their rules in the source code and R8 consumes these rules automatically, saving the app developer that headache.

Furthermore, in our attempt to continue to make Flutter as slim as possible, we reduced the Hello, World app size for Android by 2.6% (reducing it from 3.8MB to 3.7MB). Every little bit helps!

Golden image testing

The term “golden image” refers to a master image file that is considered the true rendering of a given widget, state, application, or other visual representation you have chosen to capture. In Flutter 1.12, we have implementations of the GoldenFileComparator and LocalFileComparator classes that compare by pixels instead of bits, eliminating false positives. These new implementations highlight visual differences to make it clear when there are differences between your golden image and the updates under testing.

In this case, it’s clear that the differences between the master and the test image are all in the border, making it much easier to track down the discrepancy.

Community

In addition to all of the work on Flutter and its associated tooling, the Flutter community continues to take Flutter into new and amazing directions!

#Flutter #Dart #Mobileapp