【Flutter】Katana Indicator

こんにちは。広瀬マサルです。

Futureを待っている間、インジケーターを表示して操作させないようにする

パッケージを作りました。

使い方をまとめたので興味ある方はぜひ使ってみてください！

katana_indicator

katana_indicator | Flutter package

A package to make it easier to use Flutter’s indicators (especially when waiting for processing in Future).

https://pub.dev

はじめに

アプリ開発時、ボタンのonPressedにてデータを保存する処理やログインする処理など、多少の時間がかかる処理を記述することが多くあるかと思います。

基本的には処理が完了するまでインジケーターを表示してユーザーに待ってもらい、完了時にダイアログを表示したり画面を戻ったりするのではないかと思います。

そのための処理を簡単に記述できるようなパッケージを作成しました。

前提として実行される処理はすべてFutureで待つようになっているとします。

下記のように簡単に書けます。

Copy

final future = repository.save(); // なにかしらの保存処理（Future<dynamic>を返す）
await future.showIndicator(context); // 処理が終了するまでインジケーターを表示してユーザーに操作させない
// ダイアログを表示

katana_modelはCRUDの操作がすべてFutureで待てるようになっているため保存処理を簡潔に書くことができます。

Copy

IconButton(
  icon: Icon(Icons.check),
  onPressed: () async {
    final doc = collection.create();
    await doc.save({
      "first": "masaru",
      "last": "hirose",
      "type": "kanimiso",
    }).showIndicator(context);
    context.router.pop();
  }
);

インストール

下記のパッケージをインポートします。

Copy

flutter pub add katana_indicator

使い方

基本的にFutureで用意されているエクステンションのメソッドを利用するだけです。

Copy

final doc = collection.create();
await doc.save({
  "first": "masaru",
  "last": "hirose",
  "type": "kanimiso",
}).showIndicator(context);
context.router.pop();

インジケーターはCircularProgressIndicatorがデフォルトで利用されています。

これを変更したい場合はshowIndicatorのindicatorパラメーターを利用してください。

Copy

await doc.save({
  "first": "masaru",
  "last": "hirose",
  "type": "kanimiso",
}).showIndicator(context, indicator: Center(child: LinearProgressIndicator()));