What is it?
The Flutter widget inspector is a powerful tool for visualizing and exploring Flutter widget trees. The Flutter framework uses widgets as the core building block for anything from controls (such as text, buttons, and toggles), to layout (such as centering, padding, rows, and columns). The inspector helps you visualize and explore Flutter widget trees, and can be used for the following:
- understanding existing layouts
- diagnosing layout issues
To debug a layout issue, run the app in debug mode and open the inspector by clicking the Flutter Inspector tab on the DevTools toolbar.
Debugging layout issues visually
The following is a guide to the features available in the inspector’s toolbar. When space is limited, the icon is used as the visual version of the label.
- Select widget mode
Enable this button in order to select a widget on the device to inspect it. For more information, see Inspecting a widget.
- Refresh tree
- Reload the current widget info.
- Slow Animations
- Slow down animations to enable visual inspection.
- Debug Paint
- Add visual debugging hints to the rendering that display borders, padding, alignment, and spacers.
- Paint Baselines
- Cause each RenderBox to paint a line at each of its text baselines.
- Repaint Rainbow
- Shows rotating colors on layers when repainting.
- Invert Oversized Images
- Inverts oversized images in your running application.
Inspecting a widget
You can browse the interactive widget tree to view nearby widgets and see their field values.
To locate individual UI elements in the widget tree, click the Select Widget Mode button in the toolbar. This puts the app on the device into a “widget select” mode. Click any widget in the app’s UI; this selects the widget on the app’s screen, and scrolls the widget tree to the corresponding node. Toggle the Select Widget Mode button again to exit widget select mode.
When debugging layout issues, the key fields to look at are the
constraints fields. The constraints flow down the tree,
and the sizes flow back up. For more information on how this works,
see Understanding constraints.
Flutter Layout Explorer
The Flutter Layout Explorer helps you to better understand Flutter layouts.
For an overview of what you can do with this tool, see the Flutter Explorer video:
You might also find the following step-by-step article useful:
Using the Layout Explorer
From the Flutter Inspector, select a widget. The Layout Explorer supports both flex layouts and fixed size layouts, and has specific tooling for both kinds.
The Layout Explorer visualizes how
Flex widgets and their
children are laid out. The explorer identifies the main axis
and cross axis, as well as the current alignment for each
(for example, start, end, and spaceBetween).
It also shows details like flex factor, flex fit, and layout
Additionally, the explorer shows layout constraint violations and render overflow errors. Violated layout constraints are colored red, and overflow errors are presented in the standard “yellow-tape” pattern, as you might see on a running device. These visualizations aim to improve understanding of why overflow errors occur as well as how to fix them.
Clicking a widget in the layout explorer mirrors the selection on the on-device inspector. Select Widget Mode needs to be enabled for this. To enable it, click on the Select Widget Mode button in the inspector.
For some properties, like flex factor, flex fit, and alignment, you can modify the value via dropdown lists in the explorer. When modifying a widget property, you see the new value reflected not only in the Layout Explorer, but also on the device running your Flutter app. The explorer animates on property changes so that the effect of the change is clear. Widget property changes made from the layout explorer don’t modify your source code and are reverted on hot reload.
Layout Explorer supports modifying
In the future, we may add support for additional properties
Layout Explorer supports 7 flex options in the UI (null, 0, 1, 2, 3, 4, 5), but technically the flex factor of a flex widget’s child can be any int.
Layout Explorer supports the two different types of
Fixed size layouts
When you select a fixed size widget that is not a child of a flex widget, fixed size layout information will appear in the Layout Explorer. You can see size, constraint, and padding information for both the selected widget and its nearest upstream RenderObject.
Select the Details Tree tab to display the details tree for the selected widget.
From the details tree, you can gather useful information about a widget’s properties, render object, and children.
Track widget creation
Part of the functionality of the Flutter inspector is based on instrumenting the application code in order to better understand the source locations where widgets are created. The source instrumentation allows the Flutter inspector to present the widget tree in a manner similar to how the UI was defined in your source code. Without it, the tree of nodes in the widget tree are much deeper, and it can be more difficult to understand how the runtime widget hierarchy corresponds to your application’s UI.
You can disable this feature by passing
flutter run command.
Here are examples of what your widget tree might look like with and without track widget creation enabled.
Track widget creation enabled (default):
Track widget creation disabled (not recommended):
This feature prevents otherwise-identical
const Widgets from
being considered equal in debug builds. For more details, see
the discussion on common problems when debugging.
For a demonstration of what’s generally possible with the inspector, see the DartConf 2018 talk demonstrating the IntelliJ version of the Flutter inspector.