【Flutter】7分で始めるdevtools_extension！

概要

さて、先月Flutter 3.16がリリースされ、DevTools Extensionが追加されました。
あのDevToolsのインタフェースを自作のパッケージ用に作れると言うのです。

そして、来る12/09にGDG devfest Tokyo 2023にてLT登壇して来ました！

https://x.com/gdgtokyo/status/1733454983897768047?s=20

x.com

本記事では、その時の発表内容を通じて

・DevTools Extensionって何？美味しいの？
・DevTools Extensionはどうやって作るの？
・DevTools Extensionの雰囲気を掴みたい

の様な疑問にsampleと言うプロジェクトのsample_extensionを通して、
お答え出来るような記事になっているのでご覧いただければと思います。

それでは行ってみましょー！

執筆時環境

フォルダ/ファイルの用意

以下の様に、フォルダやファイルを作成します。

...
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の第一引数の値を渡すので良さそうです。

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/icons.dart

github.com

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などの
変数が利用可能になります。

https://github.com/flutter/devtools/blob/6e4e2ca3ca59a685162ea4132232e5b4ee1f6753/packages/devtools_extensions/lib/src/template/devtools_extension.dart#L133-L138

github.com

これらの変数を通じて、パッケージと会話をすることが可能になります。

Placeholder部分の実装

表示したい内容をwebアプリとして実装します。

この際、devtools_app_sharedという依存パッケージ内の下記フォルダにあるUIなどが利用可能となっています。

https://github.com/flutter/devtools/tree/master/packages/devtools_app_shared/lib/src/ui

github.com

キー/バリューを表示する際に、便利そうなSplitウィジェットなど
デバッギングに特化したウィジェットやテーマが利用出来ます。

build_and_copy

さて、webアプリが実装できたら、ビルドを行う必要があります。
以下コマンドを叩くことで可能です。

$ devtools_extensions build_and_copy --source=sample_devtools_extension --dest=sample/extension/devtools

これにより、実装したwebアプリをビルドし、開発中のパッケージでdevtoolsとして利用可能になります！

実際にできたものがこちら

皆様ご存知ProviderというパッケージのDevtools Extensionです。

provider | Flutter package

A wrapper around InheritedWidget to make them easier to use and more reusable.

pub.dev

あるProviderが保有している値がリアルタイムで確認することができ、開発が捗りますね！

最後に

いかがでしたでしょうか？
この記事を機に、開発中のパッケージのExtensionを作ってみようという気になっていただけると非常に嬉しいなと思います。

Twitterフォローお願いします

Twitterコミュニティ参加お願いします

☕️ Buy me a coffee