[Flutter] Detailed explanation of the use of the Flutter inspector tool, viewing the Flutter layout, widget tree, debugging interface, etc.

What is it?

这是什么？

Flutter widget inspector 是一个强大的工具,for visualization and viewing widget 树.
Flutter Framework layer usage widgets 作为 [core building blocks][core building block]
To deal with the controls（例如文本、Buttons and toggles, etc.）到布局（例如居中、填充、row and column etc.）的所有内容.
Flutter inspector Not only helps you visualize Flutter widget 树,还有其他的作用：

• Understanding Existing Layouts
• Diagnose layout problems

开始使用

要Debug layout issues,请在 [Debug 模式][debug mode] 下运行应用程序,
然后点击 DevTools 工具栏上的 Flutter inspector Option to open debug panel.

Visually debug layout issues

下面是 Flutter inspector A guide to the functions available in the toolbar.
when space is limited,will be displayed directly using the icon.

选择 widget 模式
Enable this button to select the device widget 进行查看.有关更多信息,请参考 查看 widget.
刷新树
重新加载当前 widget 的信息.
慢速动画
Run animations at one-fifth speed to optimize them.
**显示引导线
Overlay a layer of guide lines to help adjust layout issues.
显示基线
Display text baseline for text alignment.Useful for checking text alignment.
Gao Liangchong map content
Sequentially display different colors on layers when repainting.
Highlight images that are too large
Highlight and invert images that consume too much memory in running applications.

检查一个 widget

你可以浏览 widget tree and see nearby widgets And their attribute values.

要在 widget find a single tree UI 元素,
请点击工具栏中的 Select Widget Mode 按钮.
This will bring the app on the device into「widget select」模式.
Click on any application interface widget,将选中 widget 并将 widget Scroll to the corresponding node tree.再次点击 Select Widget Mode button to exit「widget select」模式.

When debugging layout issues,The key fields to look at are size 和 constraints.Pass down the tree structure of constraints,Size information is returned up.想要了解更多信息,可以查看 [深入理解 Flutter 布局约束][Understanding constraints].

Flutter layout browser

Flutter Layout browser can help you understand better Flutter 布局.

The articles detailed below may be helpful to you：

• 如何使用 Flutter Inspector Debug layout issues

Use the layout browser

从 Flutter Inspector 中,选择一个 widget.
Layout browser support [弹性布局][flex layouts] And the layout of fixed size,and have specific tools for them.

弹性布局

When you choose a flex layout widget（例如,[Row][]、[Column][]、[Flex][]）或它的子 widget 时,Elastic layout tools will be displayed in the layout browser.

The layout browser will be displayed intuitively [Flex][] widgets and how its child elements are laid out.The main and cross axes are also displayed in the browser,and the current alignment of each axis（例如,start、end 和 spaceBetween）.It also shows such as modulus of elasticity、Details such as elastic fit and layout constraints.

此外,Layout constraint violations and render overflow errors are also displayed in the browser.as you can see on the device,Violations of layout constraints are marked in red,Overflow error to the standard「yellow strip」显示.These errors are visualized to give us a better understanding of why overflow errors occur,and learn how to fix them.

查看动图

在 Select Widget Mode 模式下,Click in the layout browser widget will be synced to the device.
启用此模式,Please click on the debug panel Select Widget Mode 按钮.

You can modify the property value in the drop-down list of the layout browser,e.g. coefficient of elasticity、Elastic fit and alignment.当修改 widget 的属性时,You will see the new value in both the browser and running Flutter App takes effect on the device.Browser animations make changes clearly visible.from the layout browser widget Changes to properties do not modify the source code,will restore on hot reload.

交互属性

Layout Explorer supports modification [mainAxisAlignment][]、[crossAxisAlignment][] 和 [FlexParentData.flex][].
将来,We may add support for other properties,例如 [mainAxisSize][]、[textDirection][] 和 [FlexParentData.fit][].

mainAxisAlignment

查看动图

支持属性：

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

crossAxisAlignment

查看动图

支持属性：

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

FlexParentData.flex

查看动图

Layout browser support settings 7 elastic factor（null、0、1、2、3、4、5）,但从技术上讲,弹性 widget The elasticity factor of the child can be any integer.

Flexible.fit

查看动图

Two different types of layout browser support [FlexFit][]：loose 和 tight.

Fixed size layouts

Fixed size layout

When you choose a fixed size widget 而不是弹性 widget 时,Its layout information will be displayed in the layout browser.You can see the selected widget and its nearest superior RenderObject 的大小、Constraints and padding information.

查看动图

Debug Visual Effects

Flutter Inspector Provides a variety of ways to visually debug your application.
以下是在 Flutter DevTools 中的 inspector 可用的选项：

慢速动画

启用时,The animation will run at about one-fifth the original speed,Easy to check visual effects.
When you want to carefully observe and debugging doesn't look normal animation,这个选项会非常有用.

You can also use code to set：

import 'package:flutter/scheduler.dart';

void setSlowAnimations() {
    
  timeDilation = 5.0;
}

This would allow the animation length increases 5 倍（速度减慢 5 倍）.

更多内容

The following links provide more details.

• Flutter documentation: timeDilation property

  Flutter 文档：timeDilation 属性

The following screen recording shows the comparison before and after the animation slows down.

查看动图	查看动图

显示引导线

This feature will draw guide lines on top of your app,Painting area、对齐、间距、滚动视图、Clipping and Gap Filling.

This tool can help you better understand your layout.such as finding unwanted padding or comprehension widget 的对齐方式.

You can also be enabled through the code：

import 'package:flutter/rendering.dart';

void showLayoutGuidelines() {
    
  debugPaintSizeEnabled = true;
}

RenderBox

绘制在屏幕上的 widgets 会创建一个 [RenderBox][render box],它是 Flutter Basic construction of the layout.这些 RenderBox will add a light blue border：

对齐方式

The alignment will be shown with a yellow arrow.These arrows will show vertical and portrait orientations widget offset relative to its parent layout.例如,The button icon has four arrows indicating that it is centered：

间距

Spacing will be displayed in a translucent blue background：

滚动视图

with scrolling content widget（例如 ListView）will show green arrows：

裁剪

使用了诸如 [ClipRect Widget][] Content to be cropped,will be displayed with a pink dotted line plus a scissors icon：

空位填充

vacancy filled widgets will be displayed on a grey background,例如没有 child 的 SizedBox：

显示基线

This option displays all baselines.The baseline is the horizontal line used to position the text.

When checking if text is vertically aligned,The baseline can be very useful.例如,The baseline of the text in the image below is slightly misplaced：

[Baseline][] widget Can be used to adjust the baseline.

set the baseline [RenderBox][render box] 上,will show a line.
The baselines of the letters are shown in green,while the baseline of the symbol is shown in yellow.

You can also be enabled through the code：

import 'package:flutter/rendering.dart';

void showBaselines() {
    
  debugPaintBaselinesEnabled = true;
}

Gao Liangchong map content

This option will be used for all [RenderBox][render boxes] draw a border,
Redraw when they change the color.

Colors that cycle in the rainbow spectrum,It is helpful for you to find the parts of the application that are frequently redrawn and cause excessive performance consumption.

例如,A small animation can cause the whole page to keep redrawing.
use animation [RepaintBoundary widget][] 嵌套,It is guaranteed that the animation will only cause itself to redraw.

Below is an example of a progress indicator causing its container to repaint：

class EverythingRepaintsPage extends StatelessWidget {
    
  const EverythingRepaintsPage({
    super.key});

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(title: const Text('Repaint Example')),
      body: const Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

查看动图

use progress indicator RepaintBoundary 包裹,can reduce the redraw range to the area it occupies.

class AreaRepaintsPage extends StatelessWidget {
    
  const AreaRepaintsPage({
    super.key});

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(title: const Text('Repaint Example')),
      body: const Center(
        child: RepaintBoundary(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

查看动图

RepaintBoundary widget There is also some extra consumption.They have certain help to the performance,But it will also increase memory consumption when creating additional drawing canvases.

You can also be enabled through the code：

import 'package:flutter/rendering.dart';

void highlightRepaints() {
    
  debugRepaintRainbowEnabled = true;
}

Highlight images that are too large

This option will images highlight said size is too large,And perform vertical flip and tone inversion：

Be highlighted images using too much memory.例如一张 5MB With the size of the images 100x100 pixel display.

Images like these can lead to poor performance,Particularly on low-end equipment,And when you have a lot of images like this in a list,The performance drop will stack up.Information about each image is printed in the debug console window：

dash.png has a display size of 213×392 but a decode size of 2130×392, which uses an additional 2542KB.

超过 128KB of images would be considered too large.

调整图片

在可能的情况下,The best way is to resize the image resource,make it smaller.

If this method is not feasible,你可以使用 Image in the structure
cacheHeight 和 cacheWidth 参数：

class ResizedImage extends StatelessWidget {
    
  const ResizedImage({
    super.key});

  @override
  Widget build(BuildContext context) {
    
    return Image.asset(
      'dash.png',
      cacheHeight: 213,
      cacheWidth: 392,
    );
  }
}

Such a method allows the engine to parse the image at the specified size,减少内存的消耗
（The parsing overhead and space occupation are still larger than the image adjustment image itself）.
Set parameters anyway,Images will still render with layout constraints or sizes.

This property can also be set using code：

void showOversizedImages() {
    
  debugInvertOversizedImages = true;
}

更多内容

The following links provide more details：

• Flutter 文档：debugInvertOversizedImages

树的详细信息

选择 Details Tree Label display selected widget Details of the tree structure of.

Detailed information from the tree,你可以获取有关 widget 的属性、Useful information such as render objects and child nodes.

追踪 widget 创建

Flutter inspector Part of the functionality is based on detecting the source code of the application,for a better understanding of creating widget 的源位置.Flutter inspector can be defined in source code similar to UI 的方式呈现 widget 树.如果没有它,widget The tree structure that makes up a node in the tree will be deeper,and more difficult to understand the runtime widget How does the hierarchy relate to the application's UI 相对应.

你可以通过在 flutter run 后面添加参数 -no track widget creation 来禁用此功能.

下面是 widget Tree with and without tracing enabled widget Create an example under.

启用追踪 widget 创建（默认）：

关闭追踪 widget 创建（不推荐）：

This feature avoids putting other identical const 的 Widgets 视为相同.有关更多详细信息,请参阅关于 [Common problem when debugging][common problems when debugging] 的讨论.

其他资源

有关 Flutter inspector Demonstration of common functions,请参考 [DartConf 2018 talk][]
中基于 IntelliJ 上的演示.

文章来源：
Flutter中文网