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

Widget Tree

现在我们看看，从RecipeApp 的main()入口开始，整个APP的Widget的结构。

通过代码对照着上面的图，可以很好的理解整个APP的Widget结构，在我们构造更复杂的布局时，这种方法非常有效。
还可以通过Android Studio的View->Tool Windows->Flutter Inspector来查看当前界面的UI结构，但是开启Flutter Inspector时需要注意以下几点：

1. 只有debug的时候才能展示。
2. 程序正在运行时才能展示。
3. Flutter inspector 卡在 “Installing DevTools”,最后提示Setting up DevTools failed。
   
   按照提示重启开启Flutter inspector仍然失败，看输出提示

远程计算机拒绝网络连接。
 (OS Error: 远程计算机拒绝网络连接。
, errno = 1225), address = storage.googleapis.com, port = 10251
pub finished with exit code 69

然后仍然失败。

在Android Studio 的控制台输入如下命令

flutter.bat pub global activate devtools

flutter.bat pub global run devtools

同样提示远程计算机拒绝网络连接

最后找到一种方法解决了这个问题：
File > Settings > Languages & Frameworks > Flutter 中把 Enable embedding DevTools in the Flutter Inspector tool window 选项取消选中状态

最终，我们可以通过Flutter Inspector直接查看界面中的UI结构：