flutterでWidgetの配置(構造)を知る方法

flutterで、『F12』を押しても開発者ウィンドウが開かなった（そりゃそうだ）
記事を探す前に色々触っていたら『Widget Inspector』を発見したので、書いていこうと思います。

VSCodeで実現する方法になります。
iPhoneの方は追々試してみます。

環境

• Windows(10)
• flutter（2.10.2）

事前準備

flutterプロジェクトが作成できること前提としています。

• VSCode
  • Flutterの拡張機能

手順

1. Flutterプロジェクト作成

下記コマンドを使用してサンプルのプロジェクトを作ります。

flutter create ui_sample

下記コマンドを使用して起動確認

cd ui_sample
flutter run

こんな感じでサンプルが起動したらOKです。

2. VSCodeでWidget Inspectorの起動

VSCodeの上の方に表示される↓コレ

の中の『青い虫眼鏡』アイコンをクリック

すると、『Widget Inspector』が開いて、現在の画面のレイアウト構造が表示されます。

3. Widgetの選択方法

まずは『Select Widget Mode』をONにします。
青色になっていれば有効です。

そのうえでWidgetを選択する方法は3つあります。

3-1. エミュレータ上のWidgetから選択する

1. エミュレータ画面上の虫眼鏡をタップ
2. さらに知りたいWidgetをさらにタップ
   

3-2. Widget Inspectorのツリーから選択する

ツリーで選択すると、エミュレータとLayout Explorerそれぞれ選択状態になります。
(このままカーソルをホバーさせておくとWidgetのプロパティがツールチップ表示されます。)

3-3. Layout ExplorerのWidgetをクリックする

Layout ExplorerのWidgetをクリックしても選択可能です。

3-x. ソースコードもアクティブに

ツリーかLayout ExplorerのWidgetを選択すると、対応するソース部分がアクティブ(？)になります。

4. Widgetのプロパティを表示する

『Layout Explorer』の横にある『Details Tree』タブをクリックすると、
現在選択中のWidgetのプロパティが表示されます。

あとがき

記事書いてるときに知ったんですけど、公式にちゃんと記事ありましたね(恥)
そりゃあるのなと思いつつ、inspectorは協力なデバッグツールなので、有効活用していきたいです。

参考

• flutter inspector