Flutter开发之诊断布局调试工具：inspector（12）

Flutter inspector 类似Xcode 中查看UI图层的功能。

一、Flutter inspector 工具启动入口

Android Studio 打开Flutter App 工程运行在 iOS 模拟器上。然后Android Studio 窗口左下角的电视按钮，鼠标放上去：如图 选中Flutter inspector 点击

二、Flutter inspector 使用

inspector是用于可视化和浏览Flutter这些widget树的强大工具。主要用来解决：

• 理解现有的布局
• 诊断布局问题

如下图：可以点击widget 控件数，查看对应的布局。可以跳到对应的源码（Source code）位置，方便快速修改！

Flutter outline

Center widget：快速帮你在这个选中的widget的外面包装一层Center。
Add padding：快速帮你在这个选中的widget的外面包装一层padding。
Warp with Column：快速帮你在这个选中的widget的外面包装一层Column。
Warp with Row：快速帮你在这个选中的widget的外面包装一层Row。
Warp with Container：快速帮你在这个选中的widget的外面包装一层Container。
Extract widget：快速帮你将选中的widget抽取为一个widget类。
Remove widget：移除当前选中widget。

Flutter outline 类似Xcode 中（Snippets）快捷代码块功能能。