New Flutter tooling releases -- Inspector: “Just my Widgets”

[Nilay Yener]

Hi all

Here are details for the latest tooling release!

Inspector

We’ve significantly refactored the Inspector to help highlight the widgets created in your own code, and to pull relevant information out of deeply nested widget trees. As part of this, the inspector UI has been broken out into a master / details view: the master tree shows just the widgets created directly by your project, while the details tree shows the details of how the selected widget is implemented:

This UI refactor works best with when used with the --track-widget-creation runtime option. To enable this, open Preferences > Languages & Frameworks > Flutter, and select the ‘Run applications with --track-widget-creation’ option. In future releases of the plugin, this setting will be enabled by default.

Other Inspector work includes better handling of applications that use multiple isolates, and showing properties inline in the details view (allowing you to see properties for multiple widgets at once).

Editor refactorings

We added a new refactoring: 'Extract Widget'. This refactoring is designed to help you pare down large build methods and move parts of the build method into a new widget class.

To use it, right click on the constructor for the widget subtree you want to extract (or on a method returning widget) and select ‘Refactor > Extract > Flutter Widget…’ :

Hot reload workflow

When reloading and restarting, we now label those actions in IntelliJ’s local file history. This allows you to go back to previous reload points and compare changes made as you iterate on a UI:

IntelliJ’s local history is available from the context menu, under ‘Local History > Show History’.

Performance monitoring

We improved support in IntelliJ and Android Studio for running applications in profile mode. This mode is essentially a release build of your application with some performance monitoring capability retained. To run in profile mode, you can either select the ‘Run > Flutter Run in Profile Mode’ menu item, or, use the ‘Profile’ button from the main toolbar (this is available next to the ‘Run’ and ‘Debug’ buttons for Android Studio, and in some versions of IntelliJ).

As part of this work, we’ve added a tab to the Inspector to show your application’s FPS and memory usage:

While this runtime information is also available in debug mode runs of your application, profiling debug mode builds is not recommended. Profile mode will be more representative of the performance of release builds of your application. For more information about profile mode, see our documentation.

Miscellaneous:

• improvements to the Flutter Outline view’s live preview feature, including: adding a refactoring to insert a forDesignTime() constructor for previewing widgets, fixes to make previewing work on Windows, and sorting children outlines by their RenderObject.depth during preview

• better support for importing Flutter projects

• better support for using multiple Flutter modules per IntelliJ project

• add an option to create projects in offline mode

• simplify how we recognize Flutter projects when using Bazel

• improvements to the "Open in XCode" and "Open in Android Studio" menu items

• when reloading, have the 'reloading...' notification close after the reload completes