Flutter Inspector无法显示完整的Widget树

Posted 2022-10-15 IT人.阿标

最近Flutter项目遇到一个比较棘手的问题我。

背景：

们项目是Native+Flutter混合开发模式，Module比较多总共七十一个Module，其中Flutter业务Module就有九个，还不包括各种底层的轮子。

问题：

​ 在Flutter开发过程中发现Flutter Inspector一直无法显示完整的Widget树，问了好几个同事都基本上不用这个功能（不太理解，这个功能很实用啊）。

​ 跟进了N久，尝试了重启N次都是失败，也以为是中间APM的某个BUG导致，也不是因为Widget生命周期问题导致。

​ 后面在github上面发现也有一个人遇到了同样的问题：Flutter Inspector cannot inspect a PageRoute if it is pushed from a package，收到了启发，总得来说应该就是：

​ 这是Flutter Insepctor本身的预期行为，Flutter Inspector本身不会显示应用程序完整的Widget树。换句话说，摘要树是完整树的过滤版本，它仅显示由应用程序直接创建的小部件。相信你如果了解Widget的话，你就知道它的难处，为什么要进行过滤，它们需要权衡取舍。
​ 为了使Flutter Inspector能够识别Widget并且不过滤掉其他Moduel的Widget，我们需要手动指定Moduel为项目的一部分。

参照方法：

AS打开指定的Flutter工程

1、右击Flutter Host工程：Open Module Settings

2、左侧选择Modules

3、点击最右侧的"+Add Content Root"，将选择需要的model或者packages

经过操作以后就能正常显示Widget树了。