【Flutter】生産性爆上がり| DevToolsの便利な活用法6選 2025年版

Flutter

柴田晃清

2025年03月12日

はじめに

株式会社メンバーズCross Applicationカンパニーの柴田です。

Flutterでアプリ開発をする際にDevToolsを活用できていますか？「使うと便利なんだろうな〜」「色々表示されてて難しそうだな」と思い、DevToolsの活用を先延ばしにしていませんか？

本記事では以下の6つのユースケースにおいて、生産性を爆上げするDevToolsの活用方法を紹介します！

Widgetの状態を確認する方法！
画面上のこのボタンが定義されているDartファイルの場所を知りたい！
アニメーションをゆっくり動かして動作を確認したい！
ネットワーク通信のタイミングや中身を確認したい！
画面がカクツク原因を知りたい！
パッケージの内部状態を知りたい！

環境

本記事では以下の環境で動作確認を行なっています。Flutter 3.29.0のDevToolsでは新しいUIの導入と新機能の追加が行われています。他のバージョンでは文言や機能に差があるので注意してください。また、DevToolsはAndroid Studioから起動したものを使用して動作確認を行っています。

> flutter --version
Flutter 3.29.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 35c388afb5 (9 days ago) • 2025-02-10 12:48:41 -0800
Engine • revision f73bfc4522
Tools • Dart 3.7.0 • DevTools 2.42.2

ユースケース1: Widgetの状態を確認する方法！

Flutter Inspector タブの「Selcted Widget Mode」ボタンをクリック後、アプリ画面で確認したい部分をタップするとWidgetの状態を確認できます。

DevTools左側にはWidgetツリーが表示され親子関係を確認できます。また、右側の Widget properties タブではWidgetに設定されているパラメータやWidgetのheight、widthが確認できます。

Widgetによっては右側に表示されるタブが増えることがあります。例えば以下の画像のようにColumn、Row、Flexやその子要素を選択している場合は Flex explorer タブが追加され、mainAxisAlignment、crossAxisAlignmentのパラメータをリアルタイムに変更したり、兄弟要素の位置関係を視覚的に確認することができます。ここで変更したプロパティはコードには自動反映されないのでその点は注意です。

ユースケース2: 画面上のこのボタンが定義されているDartファイルの場所を知りたい！

自分で実装していないコードが多い保守案件ではこのような場面が出てくると思います。そのような時は、ユースケース1の解決策と同じくFlutter Inspector タブの「Selcted Widget Mode」ボタンをクリックするだけです。これで、該当箇所のコードが自動でAndroid StudioやVisual Studio Code上に表示されます。Android StudioやVisual Studio Code以外でDevToolsを起動した場合はこの機能は使用できないので注意が必要です。

ユースケース3: アニメーションをゆっくり動かして動作を確認したい！

Flutter Inspector タブの右上の時計ボタンをクリックするとアニメーションがゆっくりになります。アニメーションの動作確認が必要な際にご活用ください。

ユースケース4: ネットワーク通信のタイミングや中身を確認したい！

Networkタブを開くと通信の詳細を一覧で確認できます。

Dartで行なっている通信のみ確認できるという点に注意が必要です。ネイティブ側で行なっている通信は確認することができません。（Swift、Kotlin、JavaScript等で行う通信を指しています。パッケージによってはそれらを使う実装になっている場合があります。）ネイティブ側で行なっている通信を確認する必要がある場合はiOSであればXcodeのInstruments、AndroidであればAndroid StudioのNetwork Inspector、Webであればブラウザのデベロッパーツールを活用することで確認可能です。

ユースケース5: 画面がカクツク原因を知りたい！

Performanceタブでは、1フレームを生成するのにかかっている時間や、どの処理で時間がかかっているかを確認することができます。

右上のEnhance Tracingで Trace widget builds にチェックを入れた状態で、棒グラフの中でオレンジになっているところをクリックし、Timeline Eventsを開くとどのWidgetで時間がかかっているかを簡単に確認できます。以下のタイムラインがうまく表示されない時は右上のreloadボタンをクリックしてください。例えば以下の画像だと、「Columnの表示に時間がかかっているな〜」「よく見ると要素数が多いなぁ〜」ということを確認できます。

棒グラフ中でオレンジに色になっている部分は1フレームに17ms以上かかり60fpsを出せていないフレームになります。ですので、オレンジのところを中心に中身を確認しましょう。

また、頻繁なrebuildもFlutterにおいてパフォーマンス低下のよくある要因です。こちらはTimeline Events の左隣の Rebuild Stats で確認できます。例えば以下の画像では、「Textのrebuild回数が多いな〜」「不要なrebuildであればrebuild範囲を狭めよう！」という形で改善ができます。

ユースケース6: パッケージの内部状態を知りたい！

対応しているパッケージは少ないですが、DevTools Extension という機能を使用するとDevTools上でパッケージの内部状態を知ることができます。2025年2月現在provider、shared_preferences、drift等が対応しています。日本でよく使われているriverpodは開発中のようです。

例えばshared_preferencesを使用している場合は、以下画像のようにshared_preferencesタブが追加されて、値の確認、編集等が可能になります。

まとめ

特に使用してほしい機能を中心にFlutter DevToolsの機能を紹介してきました。ユースケース4と5で紹介した機能はFlutter Webでは使用できませんが、Chrome のDevToolsで同等の機能が利用できます。本記事を通して、更にDevTools活用に興味を持たれた方は公式のドキュメントや、公式YouTubeもおすすめします。本記事では紹介していない機能が細かく紹介されています。