【flutter】カーソル選択したWidgetの情報を見る方法

はじめに

flutter開発をする際、UIが崩れてしまったけど、どのWidgetが原因かわからない。。と思ったことはありませんか？今回はそんな時に使えるWidget Inspectorを紹介します。

※VSCodeでのみ動作確認しています。

debug mode で実行している場合

flutterをvscodeで利用している場合、F5キーでデバッグモードで実行できます。 debug modeからwidget inspectorを利用したい場合は以下画像の虫眼鏡をクリック。

次に赤枠部分をクリックした後、実行しているエミュレーター、ブラウザの情報を知りたい箇所を選択します。 これで選択箇所の情報を得ることができます。

また、vscode上でコードの位置に移動してくれるため、UIをスムーズに修正できます。

以上がdebug mode時のwidget inspectorの使い方です。

flutter run コマンドで実行している場合

実行中のターミナルからVキーを押すことでwidget inspectorが起動します。 ブラウザ上で開きますが、基本操作は変わりません。

ただし、VScodeで該当コードには飛んでくれないので注意が必要です。

さいごに

今回はwidget inspectorの使い方について紹介しました。 この機能を活用することによって、直感的に何が間違っているかを知ることができるため、開発効率が良くなるかと思います。