lazy_load_indexed_stackというFlutter Packageを作りました！

2021-11-13

#個人開発

#Flutter

はじめに

lazy_load_indexed_stackというFlutter Packageを作成し公開しました！初めての自作Packageでしたが、簡単にできたので概要や経緯などを書いていきます。

pub.dev

Github

`lazy_load_indexed_stack`の概要

lazy_load_indexed_stackはその名前の通り、FlutterのWidgetであるIndexedStackを遅延読み込みできるようにしたものです。

IndexedStackはボトムナビゲーションとともに使うことが多いかと思いますが、ボトムナビゲーションの各ページに対応したWidgetをIndexedStackのchildren引数に渡します。その際、childrenに渡したWidgetが全てビルドされてしまいます。

そのWidgetの中でAPIへのリクエストやデータベースへのアクセスがあったり、複雑なUIを持つWidgetの場合、IndexedStackのビルドにとても時間がかかってしまったり、描画がカクついたりしてしまいます。

そこでlazy_load_indexed_stackを使うと、必要なページのみをそのページが必要になったタイミングでビルドできるようになります。再びそのページが必要になった場合は、既にビルド済みのページを使用することができます。

使い方

使い方はIndexedStackとほとんど同じように使うことができます。

LazyLoadIndexedStack(
  index: 0,
  children: [
    Page1(),
    Page2(),
    Page3(),
  ],
  /// 読み込みされていないときのWidgetも指定することができます。デフォルトはContainer()になっています。
  unloadWidget: _buildLoadingWidget(),
)

詳しくはpub.dev内のExampleやDocumentを見て見てください。

Example

Document

Packageの公開にあたって

Packageの作成と公開は簡単にできました。

以下のコマンドでPackageを作るための雛形が自動で作成されます。

flutter create --template=package package_name

公開も以下のコマンドで簡単にできました。

flutter pub publish

おわり

Flutter Packageの自作は簡単にできたので、興味がある方は簡単なものからぜひ作って見てください！

また、lazy_load_indexed_stackが気になった方はpub.devやGithubを見てみてください！

pub.dev

Github

以上です！

余談

pub.devのPackageページにはScoreというものがあるのはご存知でしょうか？

僕は今回のPackage作成にあたり、初めてちゃんと見ました。

簡単に言うと、Packageの使用者にとって分かりやすく使いやすいPackageになっているか、をPUB POINTSという指標でスコア化しているということです。

指標には「ドキュメントが整備されているかどうか」や「Null Safetyに対応されているか」などの指標があり、さらにそれぞれの中で詳細な指標に分かれていたりします。

どんなことをしておけばPackage使用者にとって使いやすいPackageになるかといったことが、指標がになっているので明確であり、スコア化されているので分かりやすいものになっています。僕のような初めてのPackage作成者にとっても、Packageを作るにあたってどんなことをしておけば良いのかの方針が明確であるのでとても作りやすかったです。

こういったPackageの使いやすさの指標や数値化が丁寧にされていて、さすがGoogleだなと感嘆しました。