DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024

概要
Flutter におけるアプリ開発において、 DevTools は必要不可欠な存在です。
しかし既存の DevTools に独自の機能をカスタマイズできることはあまり知られていません。
DevTools を独自にカスタマイズすることで、ログの表示制御、キャッシュの表示、アプリ内の開発者用の画面を DevTools に移行するなど、開発体験の向上が見込めます。

このセクションでは、devtools_extensions パッケージを使用して、 DevTools を独自にカスタマイズする方法や、
実際のチーム開発でどのような機能をカスタマイズしているかなどの実例を紹介します。
加えてパッケージ製作者向けに自身のパッケージに DevTools Extensions を提供する方法も解説します。

想定視聴者
DevTools の開発に興味のある方
チーム開発の生産性を上げたい方
アプリ内の開発用画面を DevTools に移行させたい方

Transcript

1. DevTools extensions で 独自の DevTool を開発する 2024/11/22 吉田航己 1
2. 株式会社サイバーエージェント モバイルアプリエンジニア #Flutter #Neovim #野球 #バイク #SKKに最近入門しました 吉田 航己 @lllttt06 @koki8442 Yoshida Koki 2
3. DevTools extensions とは？ DevTools extensions の活用事例 DevTools extensions の作成方法 01 02 03 CONTENTS 3 04 DevTools extensions 開発の Tips
4. 4 01 DevTools extensions とは？ 4
5. DevTools extensions とは？ Devtools extensions とは pub package の形で提供される開発者用のツール Devtools 内に自動で統合され、ブラウザや IDE から利用可能 01 5 開発の生産性向上
7. 7 Devtools に新しく独自のタブが作成される！
8. 8 8
9. DevTools extensions とは？ Devtools extensions の利点 • Flutter Web で作成できる • 既存 package への統合に加え、独立した package として公開可能 • 既存の Devtools の仕組みを再利用できる ◦ VM 接続 ◦ UI コンポーネント ◦ その他ユーティリティ 01 9
10. 10 02 DevTools extensions の活用事例 10
11. DevTools extensions の活用事例 弊チームでは... ・GraphQL Cache Inspector ・Loading State Toggle ・Dio Logger Toggle 02 11
12. DevTools extensions の活用事例 02 12 https://github.com/lllttt06/flutter_devtools_extension_sample Demo
13. DevTools extensions の活用事例 02 13
14. 14 DevTools extensions の活用事例 GraphQL Cache Inspector graphql_flutter ではどんなデータが キャッシュされているのか確認しづらい ・GraphQLClient のキャッシュを可視化 ・正規化された Tree 構造を出力 ・React の Apollo Client を参考 https://www.apollographql.com/docs/react/devel opment-testing/developer-tooling 02 14
15. 15 DevTools extensions の活用事例 Loading State Toggle すぐに状態が切り替わる Loading 中 の UI が確認しづらい ・Loading 状態の UI を切り替え ・Skeleton などの確認に利用 ・React の Suspense を参考 https://react-devtools-tutorial.vercel.app/toggl ing-suspense-fallbacks 02 15 isLoading == true isLoading == false
16. 16 DevTools extensions の活用事例 Dio Logger Toggle GraphQL 通信の結果をPrettyDioLogger を用いて出力しているが、ログが増えるこ とで他のログが追いづらい Http 通信のログ出力を on/off 02 16
17. 17 03 DevTools extensions の作成方法 17
18. 18 DevTools extensions の作成方法 Loading State Toggle を実際に作成しながら説明 03 18 isLoading == true isLoading == false
19. 19 DevTools extensions の作成方法 Loading State Toggle の全体像 03 19
20. 20 DevTools extensions の作成方法 Loading State Toggle の全体像 03 20
21. 21 DevTools extensions の作成方法 | app/main.dart debugLoadingState 03 21
22. 22 DevTools extensions の作成方法 Loading State Toggle の全体像
 03 22
23. 23 DevTools extensions の作成方法 GraphQLQueryContainer • result.data によって Widget を出し分け • debugLoadingState == true 強制的に Loading 用の Widget 03 23
24. 24 DevTools extensions の作成方法 GraphQLQueryContainer • result.data によって Widget を出し分け • debugLoadingState == true 強制的に Loading 用の Widget 03 24
25. 25 DevTools extensions の作成方法 GraphQLQueryContainer • result.data によって Widget を出し分け • debugLoadingState == true 強制的に Loading 用の Widget 03 25
26. 26 DevTools extensions の作成方法 既存 package に追加する場合 1. config.yaml の作成 2. Devtools extensions のパッケージを作成 3. Flutter web で build 参考 : https://pub.dev/packages/devtools_extensions 03 26
27. 27 DevTools extensions の作成方法 1. config.yaml の作成 03 27 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true
28. 28 DevTools extensions の作成方法 1. config.yaml の作成 03 28 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true 表示名
29. 29 DevTools extensions の作成方法 1. config.yaml の作成 03 29 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true Report an issue で遷移する URL
30. 30 DevTools extensions の作成方法 1. config.yaml の作成 03 30 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true Devtools extensions のバージョン
31. 31 DevTools extensions の作成方法 1. config.yaml の作成 03 31 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true 表示名の左側のアイコン material/icons.dart
32. 32 DevTools extensions の作成方法 1. config.yaml の作成 03 32 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true dart or Flutter アプリとのコネクトが必要か
33. 33 DevTools extensions の作成方法 既存 package に追加する場合 1. config.yaml の作成 2. Devtools extensions のパッケージを作成 3. Flutter web で build 参考 : https://pub.dev/packages/devtools_extensions 03 33
34. 34 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 34 flutter_kaigi/ └── packages/ ├── app/ │ ├── extension/ │ │ └── devtools/ │ │ ├── build/ │ │ └── config.yaml │ └── lib/ └── devtools_ext/ └── lib/ $ flutter create --template app --platforms web devtools_ext $ flutter pub add devtools_extensions devtools_ext という名前の web 向けの Flutter アプリとして作成 devtools_ext の作成
35. 35 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 35 flutter_kaigi/ └── packages/ ├── app/ │ ├── extension/ │ │ └── devtools/ │ │ ├── build/ │ │ └── config.yaml │ └── lib/ └── devtools_ext/ └── lib/ $ flutter create --template app --platforms web devtools_ext $ flutter pub add devtools_extensions devtools_extensions を追加 devtools_ext の作成
36. 36 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 36 DevtoolsExtension Widget の使用
37. 37 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 37 DevtoolsExtension Widget の使用 ・Devtools 用の Theme 設定 ・Devtools extensions で使用可能な globals の初期化 ・extensionManager ・serviceManager ・dtdManager
38. 38 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 38 作成した Devtools extensions を run してみる
39. 39 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 39
41. 41 実行中のアプリと接続するには VM の URI が必要
44. 44 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 44 DevtoolsExtension Widget の使用 Text を置き換える
45. 45 DevTools extensions の作成方法 Loading State Toggle の全体像 03 45
46. 46 DevTools extensions の作成方法 Loading State Toggle の全体像 03 46
47. 47 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 実行中のアプリと Devtools extensions の通信 03 47 app : registerExtension で ExtensionHandler を登録 devtools_ext : serviceManager.callServiceExtensionOnMainIsolate で登録した ExtensionHandler を呼び出す
48. 48 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 実行中のアプリと Devtools extensions の通信 03 48 app : registerExtension で ExtensionHandler を登録 devtools_ext : serviceManager.callServiceExtensionOnMainIsolate で登録した ExtensionHandler を呼び出す
49. 49 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 実行中のアプリと Devtools extensions の通信 03 49
50. 50 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 実行中のアプリと Devtools extensions の通信 03 50 app : registerExtension で ExtensionHandler を登録 devtools_ext : serviceManager.callServiceExtensionOnMainIsolate で登録した ExtensionHandler を呼び出す
51. 51 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 実行中のアプリと Devtools extensions の通信 03 51
52. 52 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 52
53. 53 DevTools extensions の作成方法 既存 package に追加する場合 1. config.yaml の作成 2. Devtools extensions のパッケージを作成 3. Flutter web で build 参考 : https://pub.dev/packages/devtools_extensions 03 53
54. 54 DevTools extensions の作成方法 Flutter web で build 03 54
55. 55 Devtools に新しく独自のタブが作成される！
56. 56 56
57. 57 DevTools extensions の作成方法 03 57
58. 58 04 DevTools extensions 開発の Tips 58
59. 59 DevTools extensions 開発の Tips DevToolsExtension で初期化した globals の活用 • ExtensionManager • ServiceManager • DTDManager 参考 : https://pub.dev/packages/devtools_extensions 04 59
60. 60 DevTools extensions 開発の Tips DevToolsExtension で初期化した globals の活用 • ExtensionManager • ServiceManager • DTDManager 参考 : https://pub.dev/packages/devtools_extensions 04 60 DevTools にバナーやスナックバーで通知
61. 61 DevTools extensions 開発の Tips DevToolsExtension で初期化した globals の活用 • ExtensionManager • ServiceManager • DTDManager 参考 : https://pub.dev/packages/devtools_extensions 04 61 VM Service との連携
62. 62 DevTools extensions 開発の Tips DevToolsExtension で初期化した globals の活用 • ExtensionManager • ServiceManager • DTDManager 参考 : https://pub.dev/packages/devtools_extensions 04 62 ファイルシステムとの連携が可能
63. 63 DevTools extensions 開発の Tips 04 63
64. 64 DevTools extensions 開発の Tips 既存パッケージを参考にする https://pub.dev/packages/devtools_extensions 04 64
65. 65 まとめ • Devtools Extensions で独自の開発機能を作成可能 • 作り方は簡単 3 ステップ ◦ config.yaml の作成 ◦ Devtools extensions のパッケージを作成 ◦ Flutter web で build • React など Web 界隈のツールを参考にするのもオススメ 65
66. 66 ご清聴ありがとうございました Thank you! 66
67. 67 参考文献 https://docs.flutter.dev/tools/devtools/extensions https://medium.com/@lennarddeurman/exploring-fluters-new-c ustom-devtools-extensions-f0e42567d5ae https://www.youtube.com/watch?v=gOrSc4s4RWY https://www.youtube.com/live/Ah3mNZKkCmk?si=GNuNfANV_ ogs4rFy https://www.apollographql.com/docs/react/development-testi ng/developer-tooling https://react-devtools-tutorial.vercel.app/toggling-suspense-f allbacks 67