概要
どうも、@daiki1003です！さて、先月Flutter 3.16がリリースされ、DevTools Extensionが追加されました。
あのDevToolsのインタフェースを自作のパッケージ用に作れると言うのです。
そして、来る12/09にGDG devfest Tokyo 2023にてLT登壇して来ました！
本記事では、その時の発表内容を通じて
・DevTools Extensionって何？美味しいの？
・DevTools Extensionはどうやって作るの？
・DevTools Extensionの雰囲気を掴みたい
の様な疑問にsampleと言うプロジェクトのsample_extensionを通して、
お答え出来るような記事になっているのでご覧いただければと思います。
それでは行ってみましょー！
執筆時環境
| 名前 | バージョン |
| macOS | Sonoma 14.1.2 |
| Flutter | 3.16.1 |
フォルダ/ファイルの用意
以下の様に、フォルダやファイルを作成します。
...
sample/ // 開発中パッケージのレポジトリ
packages/
sample/ // 開発中パッケージ
extension/
devtools/
build/
config.yaml
config.yml
config.ymlは以下の様な記述をします。
name: sample issueTracker:version: 0.0.1 materialIconCodePoint: '0xe0b1'
name
開発対象のパッケージ名です。
issueTracker
「問題を報告する」ボタンを押した時に開くURLを記述します。GitHubのIssuesページが通例です。
version
Extensionのバージョンです。
materialIconCodePoint
Devtools一覧上で、このExtensionのタブに表示されるアイコンの様です。
こちらのIconDataの第一引数の値を渡すので良さそうです。
Webアプリの作成
ExtensionはWebアプリ上で動作するため、Webアプリを作っていきます。
フォルダ作成
以下のフォルダを作成します。
sample/
packages/
sample/
sample_devtools_extension/ /* こちら */
サンプルでは、この位置に作っていますがこちらでなくてもOKです。
webアプリの作成
そして、こちらのフォルダの中でflutter createを叩き、webアプリの雛形を作成します。
$ flutter create --template app --platform web sample_devtools_extension
devtools_extensionsパッケージのインストール
上記プロジェクトのpubspec.yamlにて、devtools_extensionsパッケージをインストールします。
devtools_extensions: ^0.0.10 // latest one
DevToolsExtensionウィジェットを表示
import 'package:devtools_extensions/devtools_extensions.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const SampleDevToolsExtension());
}
class SampleDevToolsExtension extends StatelessWidget {
const SampleDevToolsExtension({super.key});
@override
Widget build(BuildContext context) {
return const DevToolsExtension(
child: Placeholder(),
);
}
}
これで雛形の完成です。DevToolsExtensionウィジェットが初期化されると同時に、serviceManagerやextensionManagerなどの
変数が利用可能になります。
これらの変数を通じて、パッケージと会話をすることが可能になります。
Placeholder部分の実装
表示したい内容をwebアプリとして実装します。
この際、devtools_app_sharedという依存パッケージ内の下記フォルダにあるUIなどが利用可能となっています。
キー/バリューを表示する際に、便利そうなSplitウィジェットなど
デバッギングに特化したウィジェットやテーマが利用出来ます。
build_and_copy
さて、webアプリが実装できたら、ビルドを行う必要があります。
以下コマンドを叩くことで可能です。
$ devtools_extensions build_and_copy --source=sample_devtools_extension --dest=sample/extension/devtools
これにより、実装したwebアプリをビルドし、開発中のパッケージでdevtoolsとして利用可能になります！
実際にできたものがこちら
皆様ご存知ProviderというパッケージのDevtools Extensionです。
あるProviderが保有している値がリアルタイムで確認することができ、開発が捗りますね！
最後に
いかがでしたでしょうか？
この記事を機に、開発中のパッケージのExtensionを作ってみようという気になっていただけると非常に嬉しいなと思います。
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
@daiki1003
コメント