１人 Flutter Advent Calendar 2019：#19 DevTool

FlutterはDevToolが充実していています。
AndroidやiOSならMarketでアプリの売上につながるから開発環境を整えるモチベーションもわかりますが、なぜFlutterでこんなに整っているのか。しかも無料。

Performanceを見るツールもありますが
https://flutter.dev/docs/development/tools/devtools/inspector
のにLayoutを調べる機能もあります。
Android Studioを利用しているならば⇧⌘A(Shift + command + a)で、「flutter inspector」で検索すると出てきます。

大体触れば何かが起こるので、だいたい分かると思いますが「Enable Select widget mode」はちょっと何が起こるのかすぐにはわからないと思います。
リンクをたどっていくと動画にたどりつくので見ればすぐに分かりますが、マウスで選んだ場所のWidgetがすぐに分かります。
https://youtu.be/JIcmJNT9DNI?t=361

AndroidでもLayout Inspectorがありますが、同じような機能です。

動画でやっているようなズルズルカーソルを動かすと選択されるWidgetが変わるようなことも実機でもできました。
指を置きっぱなしにして移動すれば実機上でどこに何があるのかわかります。

こんな機能、どこで使うんだろう。自分で作ったやつなら把握しているし必要ないだろうと思うかも知れないですが、人が作ったものをメンテする時には非常に役に立つと思います。
このUIを表示しているコードどこにあるんだろう。見つからない。。。とか、既存のアプリをメンテしている人ならよくあると思います。

Androidの場合、Layout Inspectorからidを見つけて、そのidから検索してとかを僕はしますが、FlutterならClick一つでcodeまでjumpするので、codeにたどり着くのが非常に早いですし、多少Layoutのcodeのネストが深くてもツールで追いかけられるのはすごいです。