Flutter Widget Inspector

Flutter框架使用widget作為核心構建塊，從控件（文本、按鈕、toggle等）到布局（居中、填充、行、列等）的任何內容都是。 Inspector是用于可視化和瀏覽Flutter這些widget樹的強大工具。在以下情況下可能會有幫助：

• 不清楚現有布局
• 診斷布局問題

點擊Flutter Inspector工具欄上的“Select widget”，然后點擊設備(真機或虛擬機)以選擇一個widget。所選widget將在設備和widget樹中高亮顯示。

然后，您可以瀏覽IDE中的交互式widget樹，以查看附近的widget并查看其字段值。如果您想調試布局問題，那么Widgets樹可能不夠詳細。 在這種情況下，單擊“Render Tree”選項卡查看樹中相同位置的渲染樹。當調試布局問題時，關鍵是看size和constraints字段。約束沿著樹向下傳遞，尺寸向上傳遞。

開始使用Inspector

Inspector目前可用于Android Studio或IntelliJ IDEA的Flutter插件。