Flutter向けのパッケージ(OSS)をリリースした話

Dart/Flutter

Flutter 向けのパッケージ(OSS)を pub.dev にリリースしました。

広く多人数に使える形式でライブラリをリリースしたのは初めてだったので、モチベーションやどのように作業が進んだかをメモしておきます。

どのようなパッケージを作成したのか?

まずは成果物の紹介から。

resizable_widget という Flutter 向けのパッケージを作成しました。

resizable_widget | Flutter Package
Enables users to resize the internal widgets by dragging. This package contains simple APIs, but if needed, you can customize ResizableWidget flexibly.

(GitHub はこちら

要するに、以下のようなことができるようになるパッケージです。

パッケージ作成のモチベーション

現在、(プライベートですが)Flutter でデスクトップアプリケーションを作成しており、その中で「レイアウトサイズをユーザーが自由に変更できるような仕組みが欲しいな」と思う場面がありました。

普通に需要がありそうですし、何かしらの手段があるのかと思っていたのですが、自分が調べた範囲では適切なパッケージ・実装方法は見つけられませんでした。
これは考察ですが、Flutter はかなり最近になってデスクトップアプリケーションを正式にフルサポートし始めており、元々はモバイル向けのフレームワークでした。
そのため、「レイアウトサイズをユーザーが操作できる」ことに需要が無かったのだと思います。

ただ、自分の作成するアプリケーションではこの機能が欲しいな、と思ったので、それならばパッケージ化して汎用的に利用できるようにしてみよう、と考えました。

プロジェクトの作成

Flutter(というか Dart)のパッケージは通常、pub.dev にアップロードされます。
ユーザーがここにあるパッケージを利用する場合、import 文を書くだけで特別なインストール作業は必要ありません。

そして、パッケージの作成には少し特殊なプロジェクトを作成する必要があります。
まず、自分が作りたいパッケージが Flutter のみに依存しているか、Android/iOS などのネイティブAPIにも依存しているかを確認します。
Flutter のみに依存している場合は packageネイティブAPIにも依存している場合は plugin を作成することになります。

どちらかといえば、package を作れた方が良いです。
なぜなら、Flutter がサポートするすべてのプラットフォーム(Android / iOS / Web / Windows / MacOS / Linux)で利用可能なパッケージとなり、再利用性が高まるからです。
package であっても Flutter 側の API が対応しておらず、結果的に特定のプラットフォームでは利用できない可能性はありますが、将来的にサポートされる可能性がありますのでその恩恵に乗ることができます。

ここで、「test」という package を作成する場合は、以下のコマンドでプロジェクトを作成します。

$ flutter create --template=package test

パッケージの実装

Flutter プロジェクトが作成できたので、いよいよパッケージの実装に入ります。
以下のように作成すると、利用者にとって分かりやすいパッケージになると思います。

GitHub などでバージョン管理する

pub.dev へパッケージを公開するときに、リポジトリの URL を付加することができます。
実装がオープンになっている方が利用者は安心して利用できますし、Issue やプルリクエストが飛んできて、他人の手も入ってより良いパッケージに改善できる可能性があります。

公開されているパッケージはほとんどの場合 GitHub にリポジトリがあるため、こちらで管理した方が利用者的には見やすいパッケージとなります。
必ず GitHub で管理しなければならない、というわけではありませんが、なるべくそうした方が良いと思います。

本実装は lib 以下に書く

公開するパッケージの実装は lib ディレクトリ以下に書きます。

プロジェクト作成時に例となるファイルが作成されているので、ここから書いていきましょう。
このようなドキュメントが作成されるので、公開 API にはしっかりドキュメンテーションコメントを書いておきましょう

テストは test 以下に書く

実装の動作確認は、毎回アプリをデバッグ起動して手で操作して確認する…というのでも良いのですが、テストケースが多すぎたりコーナーケースがあったりするとチェック漏れが出てくる可能性があります。

そういった場合に、テストコードで自動的に動作チェックできると便利です。
ここでは詳しく書きませんが、test ディレクトリ以下にテストコードを配置できます。
プロジェクト作成時にテストファイルが作成されています。

テストコードは必須というわけではないので、不要な場合は削除してください。

実装例は example 以下に書く

こちらも必須ではありませんが、あった方が使いやすいパッケージになります。

パッケージを作っても、その使い方が分からないとユーザーには利用してもらえません。
そのため、簡単な利用例としてのサンプルプロジェクトを example ディレクトリ以下に作成すると良いでしょう。
こちらは、自分が動作確認する際にも役立ちます。

サンプルプロジェクトで利用する自作パッケージは、まだ pub.dev に公開されていません。
そのため、参照は以下のように記述してください

dependencies:
  test:
    path: ../

おまけ:今回のパッケージ実装で苦労した点

汎用的に役立つ情報ではないですが、今回のパッケージ実装で苦労した点について簡単に紹介しておきます。
主に、やりたいことを実現するための機能がどこにあるのか?を探すのが大変でした。
Qiita などに載っている日本語の情報は誤ったものが多い(もちろん、正しいものもありますが誤っている率が高い…)ので、基本的に英語で検索していました
最も信頼できるのは Flutter の GitHub Issue ページでした。ただ、ここの情報は大抵未解決で終わっているため、実装方針を定める際は StackOverflow が決定打になることが多かったです。

まず、「どうやったらドラッグを検知できるのか?」という点ですが、デバイス非依存のものとしては GestureDetector というものがあると分かりました。
これで、「どの程度ドラッグされたのか?」ということは検知できるようになったのですが、次は「それがどの位置に対応するのか?」「ドラッグの程度をレイアウトに反映させるには?」という点が課題になります。
「レイアウトの反映」については、既に知っていた StreamController による制御と、LayoutBuilder による制御を組み合わせました。
「どの位置に対応するのか?」については、自前でデータモデルを拵えて、色々と実装して解決しました。
最後に、見た目の問題ですがマウスポインタの画像を変えるのに MouseRegion というものを利用しています。

これらの答えに至るまでに様々な試行錯誤を繰り返し、結論に至るまでの半分近くの時間は無駄になっていますが、そのくらい目的の機能を探すのは困難でした。

パッケージの公開

パッケージの公開に関しての注意ですが、一度公開したパッケージは非公開にすることができません
「メンテナンスしていない」という印は付けられますが、ずっと公開されます。
そのため、秘密の情報などを誤ってアップロードしないように十分気を付けてください。

公開自体は簡単で、以下のコマンドで実行できます。

$ flutter pub publish

パッケージの公開は Google アカウントが必要になります。
初回は認証が求められるので、ターミナルに出てくる指示通りに行ってください。

どのコマンドにも言えることですが、ターミナルへ表示される内容をしっかり確認してください
パッケージ公開に関しても、公開される情報や修正すべき点などをしっかり指摘してくれます。
それに従って、警告が出なくなってから公開を確定させましょう。

コメント

タイトルとURLをコピーしました