😎

【Dart / Flutter】(超基礎編)DevToolsのWidget Inspectorを使ってみよう🤩

2022/03/31に公開約2,000字

DevToolsとは

DevToolsは、DartおよびFlutter用のパフォーマンスおよびデバッグツールの一式です。
実際に作っているアプリのパフォーマンスに問題がないか確認したりできます。

https://docs.flutter.dev/development/tools/devtools/overview

DevToolsで何ができるのか

  1. FlutterアプリのUIレイアウトと状態を調べます。
  2. FlutterアプリのUIジャンクパフォーマンスの問題を診断します。
  3. FlutterまたはDartアプリのCPUプロファイリング。
  4. Flutterアプリのネットワークプロファイリング。
  5. FlutterまたはDartアプリのソースレベルのデバッグ。等々...

今回は「1. FlutterアプリのUIレイアウトと状態を調べます。」について解説していこうと思います。
FlutterアプリのUIレイアウトと状態を調べるためには、Widget Inspectorを使う必要があります。

Widget Inspectorとは

Widget Inspectorで以下のことを確認できます。

  1. ウィジェットツリーを視覚的に確認することができる。
  2. 個々のウィジェットとそのプロパティ値を調べることができる。
  3. パフォーマンスオーバーレイを有効にしたりすることができる。

[参考記事]

https://docs.flutter.dev/testing/debugging

実際にWidget Inspectorを使ってみよう

今回は、VSCodeを使用してWidget Inspectorを使ってみます。

  1. f1を押してコマンドを実行できるようにし、Dart: Open DevToolsを選択

  2. Open Widget Inspector Pageを選択

そうすると、下記の画像のようにWidget Inspectorが表示されると思います。

今回の場合は、main.dartのウィジェットツリーを確認することができました。

  1. ウィジェットツリーにおいて1つのウィジェットを選択
    今回は、Textウィジェットを選択しました。

そうすると、Layout ExplorerTextウィジェットのレイアウトを確認することができます。
今回の場合ですと、TextウィジェットがColumnウィジェットに囲まれていることが分かります。

  1. Details Treeタブを選択

そうすると、それぞれのウィジェットのプロパティ値を調べることができます。
今回の場合ですと、Textウィジェットの値が "You have pushed the button this many times."になっていることが分かります。
また、それ以外のプロパティに関しては全て null になっているので、プロパティに値が設定されていないことが分かります。

  1. 下記の画像の赤枠部分を選択

そうすると、画面全体のレイアウトがどのようになっているのか確認することができます。

まとめ

今回は、Widget Inspectorを使用して、ウィジェットツリーの確認個々のウィジェットとそのプロパティ値の確認を行いました。
次回はWidget Inspector以外を使ってみようと思うので、楽しみに待っていてください😀

Discussion

ログインするとコメントできます