如何在Flutter Widget Inspector中查看完整Widget树？

DevTools和VS Code的运行时Widget树展示的是应用当前运行时真实构建完成的组件实例，不是静态扫描代码得到的所有声明的组件，你看不到未访问页面的子组件是Flutter框架本身的设计导致的，和你用的ChangeNotifierProvider状态管理没有关系：

• Flutter默认对路由页面做懒加载处理：MaterialApp下配置的未打开过的路由页面，不会执行build方法，不会生成对应的Element、RenderObject实例，根本不存在于当前运行时的组件树中，自然无法被工具读取到
• 只有当你手动导航到对应页面时，该页面的组件才会被框架实例化、挂载到组件树上，这时才能在DevTools里看到对应的结构

根据你的需求选对应方案即可：

查看静态代码层面的全量组件结构（无需运行应用） #

如果你的目的是梳理代码层面的组件嵌套关系，不需要看运行时状态，直接用静态扫描工具即可，完全不受懒加载影响：

• VS Code自带的Outline面板：打开对应dart文件，左侧边栏找到OUTLINE栏，即可看到当前文件内所有声明的Widget完整嵌套结构
• 安装VS Code的Flutter Widget Tree插件，可以扫描整个项目的跨文件Widget引用、嵌套关系，直接生成全项目的组件结构图

在DevTools运行时组件树中查看所有页面组件 #

如果需要在运行时调试所有页面的组件状态，用下面两种方法：

• 方法1：依次打开所有配置的路由页面，页面被实例化挂载后就会出现在组件树中
• 方法2：调试阶段临时关闭路由懒加载，强制所有路由页面提前构建（仅调试环境使用，生产环境必须改回默认懒加载配置，否则会大幅提升应用启动耗时、增加初始内存占用），示例调试代码：

// 以下代码仅用于调试时查看组件树，禁止提交到生产环境
MaterialApp(
  // 临时调试时可以直接在home中挂载所有页面，强制一次性构建所有组件实例
  home: SingleChildScrollView(
    child: Column(
      children: const [
        HomePage(),
        Page1(),
        Page2(),
        Page3(),
        // 这里列出你所有的页面组件即可
      ],
    ),
  ),
)

内容的提问来源于stack exchange，提问作者user18520267