【Dart / Flutter】（超基礎編）DevToolsのWidget Inspectorを使ってみよう🤩
DevToolsとは
DevToolsは、DartおよびFlutter用のパフォーマンスおよびデバッグツールの一式です。
実際に作っているアプリのパフォーマンスに問題がないか確認したりできます。
DevToolsで何ができるのか
- FlutterアプリのUIレイアウトと状態を調べます。
- FlutterアプリのUIジャンクパフォーマンスの問題を診断します。
- FlutterまたはDartアプリのCPUプロファイリング。
- Flutterアプリのネットワークプロファイリング。
- FlutterまたはDartアプリのソースレベルのデバッグ。等々...
今回は「1. FlutterアプリのUIレイアウトと状態を調べます。」について解説していこうと思います。
FlutterアプリのUIレイアウトと状態を調べるためには、Widget Inspectorを使う必要があります。
Widget Inspectorとは
Widget Inspectorで以下のことを確認できます。
- ウィジェットツリーを視覚的に確認することができる。
- 個々のウィジェットとそのプロパティ値を調べることができる。
- パフォーマンスオーバーレイを有効にしたりすることができる。
[参考記事]
実際にWidget Inspectorを使ってみよう
今回は、VSCodeを使用してWidget Inspectorを使ってみます。
-
f1を押してコマンドを実行できるようにし、Dart: Open DevToolsを選択
-
Open Widget Inspector Pageを選択
そうすると、下記の画像のようにWidget Inspectorが表示されると思います。
今回の場合は、main.dartのウィジェットツリーを確認することができました。
- ウィジェットツリーにおいて１つのウィジェットを選択
今回は、Textウィジェットを選択しました。
そうすると、Layout ExplorerでTextウィジェットのレイアウトを確認することができます。
今回の場合ですと、TextウィジェットがColumnウィジェットに囲まれていることが分かります。
-
Details Treeタブを選択
そうすると、それぞれのウィジェットのプロパティ値を調べることができます。
今回の場合ですと、Textウィジェットの値が "You have pushed the button this many times."になっていることが分かります。
また、それ以外のプロパティに関しては全て null になっているので、プロパティに値が設定されていないことが分かります。
- 下記の画像の赤枠部分を選択
そうすると、画面全体のレイアウトがどのようになっているのか確認することができます。
まとめ
今回は、Widget Inspectorを使用して、ウィジェットツリーの確認と個々のウィジェットとそのプロパティ値の確認を行いました。
次回はWidget Inspector以外を使ってみようと思うので、楽しみに待っていてください😀
Discussion