📖
【flutter】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から選択する
- エミュレータ画面上の虫眼鏡をタップ
- さらに知りたい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は協力なデバッグツールなので、有効活用していきたいです。
Discussion