第四章：深入理解Widget(二) -- Flutter DevTools

Flutter-从入门到放弃(目录,持续更新中)

在Flutter的开发中，有很多有用的开发工具能够帮助我们更好的完成开发工作，这一节里面我们来介绍一些常用的Flutter开发工具。

Flutter Dev Tools

在运行APP后，在AS的下方可以看到如下的按钮：

不同版本可能有所不同，我这边的版本叫Open Flutter DevTools，差别不大。
点击这个按钮，将会在浏览器中打开Flutter DevTools，配合Chrome浏览器使用效果最好了，可以点击⚙来切换黑白主题，选择自己喜欢的就行。

DevTools 概览

从上图可以看到，Fultter DevTools 为我们提供了很多有趣又使用的工具，我们先大概的了解一下。

• Flutter Inspector: 分析查看布局及Widget具体数据。
• Performance: debug模式不可用，用来分析APP的帧的图表资料，时间线时间及CPU的数据。
• CPU Profiler:记录和配置APP的session。
• Memory: 显示内存使用情况，帮助查找内存泄漏。
• Debugger: 这就不用说了，用来debug。
• Network:分析查看网络使用情况。
• Logging: 展示日志。
• App Size:分析APP的大小。
  本章我们主要关注Flutter Inspector,其他工具可以参见文档：
  https://flutter.dev/docs/development/tools/devtools/overview.

Flutter Inspector

在Android Studio中同样可以使用Flutter Inspector，但是功能相对的比较简单一些，在DevTools中打开的Flutter Inspector中，我们能更详细的查看一些数据。在Flutter Inspector中，我们可以做到以下四点：

• 可视化查看Widget tree
• 查看指定Widget的属性
• 使用 Layout Explorer来对不同的布局配置进行调整
• 使用慢速动画来查看转换过度时的效果

我们来看下Flutter Inspector中的一些有用的工具。

• Select Widget Mode：当选中这个的时候，在手机上点击APP，会选中对应得Widget，然后你可以查看Widget得具体属性，在手机上也可以看到Widget对应的区域，我在使用的时候发现只能在选中之后的第一次才能正确跳转，后面点击就不行了，还需要再次选中Select Widget Mode按钮：
  
• Refresh Tree：更新当前Widget的信息。
• Slow Animation：以5倍的时间来播放动画，方便我们查看动画效果。
• Show Guidelines：显示可视化调试提示，方便检查小部件的边界、填充和对齐等：
  
• Show Baselines：顾名思义，当启用时，将在每个文本的基线下绘制一条线：
  
• Highlight Repaints：当发生重绘时，在重绘区域高亮显示，开发者选项中有类似功能：
  
• Highlight Oversized Images：如果一个图像是超大的，它将反转图像的颜色，并翻转它倒过来。如下图所示：
  
  同时，在Android Studio中也会有日志提示：

Image assets/mag2.jpg has a display size of 1050×1350 but a decode size of 2560×1600, which uses an additional 13950KB.

Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 1050, a cacheHeight parameter of 1350, or using a ResizeImage.

更多的使用方法需要我们在实际开发中自行摸索了，在这里就不一一赘述了。