This is the fourth day of my participation in the First Challenge 2022

This article is a translation from the official 👉Using the Flutter Inspector. This is the second article in the DevTools series about how to use the Flutter Inspector tool.

Past highlights:

👉 DevTools can do

Here is the text

Note: The Inspector tool is suitable for all Flutter applications

What is the Inspector tool?

The Flutter Widget Inspector is a powerful tool to visualize and examine the Widget tree. The Flutter framework uses widgets to build the UI, such as Text, Button, Switch, etc., for display, Center, Row, Column, etc., for layout. Inspector helps developers visualize and examine Widget trees and can be used in the following situations:

  • Understand the layout that has been developed
  • Diagnosing layout problems

Begin to use

To debug a layout problem, run is applied in Debug mode. Then on the DevTools window that opens, select the Flutter Inspector TAB.

Note: Developers can also open the Flutter Inspector directly in Android Studio/IntelliJ, but developers can also see a more spacious view of the Flutter Inspector in DevTools

Visually debug layout problems

Here’s what Inspector now supports: When there’s too much space in the browser window, you can just put ICONS in it.

  •  Select widget mode

    Select a single Widget for inspection

  •  Refresh tree

    Refreshes the current Widget information

  •  Slow animations

    5 times slower animations to optimize them better

  •  Show guidelines

    Components display border lines to check for layout problems

  •  Show baselines

    Display baseline to check for text alignment problems

  •  Highlight repaints

    Display the borders of redrawn elements to check for unnecessary redraws

  •  Highlight oversized images

    Invert the color and flip the way to highlight the larger image

Check the Widget

Browse the Widget tree in the window and view the Widget’s fields

You can locate UI elements in Select Widget Mode. In this mode, you can also enable the APP to enter the “Widget Select” mode. You can connect the APP to the window by clicking on the UI on the APP and the window can also select the UI. Turning Select Widget Mode off exits the Mode.

When debugging layout issues, the key fields to look at are the size and constraints fields. The constraints flow down the tree, and the sizes flow back up. For more information on how this works, see Understanding constraints. When debugging a layout problem, the key fields are size and constraints. A Flutter is a downward 👇 constraint that transfers dimensions up. For more on Flutter layout constraints, see 👉

Use the Layout Explorer

On the Page of the Flutter Inspector, select a Widget. The Layout Explorer supports both Flex and fixed-size layouts and provides tools to respond to them.

Flex layout

When the developer selects a Flex component (such as Row, Column, flex) or a direct child of the Flex component, the Flex Layout tool appears in the Layout Explorer window.

Layout Explorer visualizes how the Flex Widget and its child nodes are laid out. The Layout Explorer shows spindle, cross axis, alignment, and more. Details such as Flex factors, Flex styles, and layout constraints are also shown.

In addition, Explorer also shows where layout constraints are out of whack and presents overflow errors. Violations of layout constraints are highlighted in red, and overflow errors are often seen in yellow. These highlights reinforce the error message: why it happened and how to fix it.

Select Widget Mode can be linked with the device. You can click the Select Widget Mode button to open it.

For properties like Flex factor, Flex style, and alignment, developers can choose from a drop-down box. When modifying Widget properties, developers can see the effects not only in the Layout Explorer, but also on the Flutter App. The Layout Explorer animates property changes to make them more visible. Widget property changes are not actually written to the code, but are changed back after hot Reload.

Property interaction

Layout Explorer supports modifying mainAxisAlignment, crossAxisAlignment, and FlexParentData.flex attributes. In future planning, properties such as mainAxisSize, textDirection, and can also be modified


Supported values:

  • MainAxisAlignment.start
  • MainAxisAlignment.end
  • MainAxisAlignment.spaceBetween
  • MainAxisAlignment.spaceAround
  • MainAxisAlignment.spaceEvenly

Supported values:

  • CrossAxisAlignment.start
  • CrossAxisAlignment.end
  • CrossAxisAlignment.stretch

Layout Explorer supports the Flex options (NULL, 0, 1, 2, 3, 4, 5) on the UI, but can technically be any int value.

Layout Explorer supports two different types: loose and Tight.

Fixed size layout

The developer selects ☝ as a fixed-size Widget, and the fixed-size information appears in the Layout Explorer. The developer can see the size, constraints, spacing, and most relevant render object information.

Visual debugging

The Flutter Inspector provides several visualization features.

Slow animations

You can slow down animations, which is useful when developers want to take a closer look at and adjust animations that aren’t quite normal.

It can also be set with code:

import 'package:flutter/scheduler.dart';

void setSlowAnimations() {
  timeDilation = 5.0;
Copy the code

This is five times slower.

Details of the timeDilation property can be found in the 👉timeDilation Property document.

In the following animation, the left side is normal and the right side is slow.

Show guidelines

Better presentation of drawing guides in APP: Render box, align, pitch, scroll view, trim, gap, etc.

This tool allows developers to better check the layout of their development. For example, finding unwanted spacing, understanding component alignment, and so on.

It can also be set in code:

import 'package:flutter/rendering.dart';

void showLayoutGuidelines() {
  debugPaintSizeEnabled = true;
Copy the code

Render boxes

Rendered widgets in the UI are surrounded by a blue border:


Alignment is indicated by a yellow tip. The arrows represent horizontal and vertical offsets relative to the parent component. For example, the button below is centered relative to the parent component:


Spacing is indicated by blue opaque areas:

Scroll views

Widgets with scrolling content display green arrows:


Clipping components, such as ClipRect Widgets, are represented by pink dotted lines and small scissors ICONS:


A grey background for gap components, such as a SizedBox with no child nodes:

Show the baselines

This feature displays the baseline of the text. The text baseline is the horizontal line that positions the text.

Great for checking that text is vertically aligned. For example, the text baseline below is a little 🤏 out of line:

The Baseline component adjusts the Baseline

Alphabetic baselines in green and Ideographic baselines in yellow.

This feature can also be turned on with the following code:

import 'package:flutter/rendering.dart';

void showBaselines() {
  debugPaintBaselinesEnabled = true;
Copy the code

Gao Liangchong draw

With this feature, each Render box has a colored border that changes color when the box is repainted. This color change can be very helpful in finding repainted areas, and frequent repainting can affect performance.

For example, a small animation might cause an entire page to be redrawn every frame. Wrapping the animation component with the RepaintBoundary component limits the redrawing to the animation component.

Here is the redraw caused by the progress bar:

class EverythingRepaintsPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Repaint Example')), body: Center( child: CircularProgressIndicator(), ), ); }}Copy the code

Using the RepaintBoundary to wrap the progress component, you can achieve the effect of just redrawing the progress component:

class AreaRepaintsPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Repaint Example')), body: Center( child: RepaintBoundary( child: CircularProgressIndicator(), ), ), ); }}Copy the code

RepaintBoundary components need to be balanced. It improves performance, but also creates a new canvas that takes up more memory.

Functionality can also be turned on with code:

import 'package:flutter/rendering.dart';

void highlightRepaints() {
  debugRepaintRainbowEnabled = true;
Copy the code

Highlight a larger version

Accentuate the larger picture by inverting colors and vertical flips:

Large images take up more memory, for example, a 5M large image with 100 x 100 pixels.

Such images can cause performance problems, especially on low-end devices, or when displaying multiple images in a list. The information for each image is printed in the Debug console:

dash.png has a display size of 213x392 but a decode size of 2130x392, 
which uses an additional 2542KB.
Copy the code

If the image is larger than 128KB, it is a large image.

Fixed image issues

However, the best way to deal with large images is to make them smaller.

If reducing the Image file is not possible, you can set the cacheHeight and cacheWidth parameters to the Image constructor.

class ResizedImage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Image.asset(
      cacheHeight: 213,
      cacheWidth: 392,); }}Copy the code

The above code tells the engine to encode and decipher images to a specified size and to reduce memory. If the image width is specified, the cacheXX parameter is ignored.

Functionality can also be turned on with code:

import 'package:flutter/painting.dart';

void showOversizedImages() {
  debugInvertOversizedImages = true;
Copy the code

About debugInvertOversizedImages more details can be 👉 Flutter documentation: debugInvertOversizedImages inspection.

The Widget details

Select the Details Tree TAB to display the Details of the selected Widget

In the detail tree, the developer can see everything about the Widget: properties, render objects, child nodes, and so on.

The Widget to create chain

To better locate the source code where widgets are created, part of the function of the Flutter Inspector is based on source code inspection. Because of source code inspection, the Widget tree displayed by the Flutter Inspector can be similar to the UI code developed by the developer. We know that the real Widget tree is much deeper than the Widget tree developed in our code. Because of source code inspection, the Widget tree displayed by the Flutter Inspector can be similar to our UI code. Without source code inspection, developers can have a hard time matching the Widget tree to the code in progress.

Developers can also disable this function by adding –no-track-widget-creation after the flutter run command.

Below is the creation diagram of the feature on and off.

Enabled (default) :

Disabled state:

Other resources

For a more detailed demonstration of the functionality, see 👉 DartConf 2018 Talk