如何通过VSCode或模拟器查看Flutter选中Widget的样式？

1. 官方Flutter DevTools（首选） #

这是官方自带的调试工具，完全能实现类似Chrome DevTools的组件样式检查功能：

• 打开方法：启动Flutter项目后，在VSCode里按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）调出命令面板，输入Flutter: Open DevTools，选择当前运行的设备即可打开。
• 核心用法：
  • 切换到Inspector面板，点击左上角的箭头图标开启「选择Widget模式」，然后在模拟器上点击任意组件，就能看到该组件的层级结构、所有应用的样式（包括继承的主题样式、自定义属性），还能直接点击代码链接跳转到VSCode里对应的组件代码位置。
  • 使用Layout Explorer面板可以可视化查看组件的布局约束、尺寸、padding/margin这些布局细节，排查布局问题很方便。

2. VSCode内置Flutter Inspector #

VSCode的Flutter插件自带这个功能，无需额外安装：

• 在VSCode左侧活动栏点击Flutter图标，展开「Inspector」面板，同样开启「Select Widget」模式，点击模拟器组件后，面板会展示组件的样式和层级信息，点击面板里的代码链接就能直接跳转到对应代码。

3. 模拟器辅助操作 #

部分Android模拟器支持长按组件唤起调试选项，但功能有限，不如官方DevTools直观，优先推荐使用上面的工具。

注意：

• 确保Flutter SDK是最新稳定版，DevTools的功能会持续优化。
• 必须保持项目处于运行状态（flutter run），DevTools才能正常连接设备。

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