🌀
【Flutter】操作をブロックするインジケーターを簡単に実装できるパッケージを作った
こんにちは。広瀬マサルです。
Futureを待っている間、インジケーターを表示して操作させないようにする
パッケージを作りました。
使い方をまとめたので興味ある方はぜひ使ってみてください！
katana_indicator
はじめに
アプリ開発時、ボタンのonPressedにてデータを保存する処理やログインする処理など、多少の時間がかかる処理を記述することが多くあるかと思います。
基本的には処理が完了するまでインジケーターを表示してユーザーに待ってもらい、完了時にダイアログを表示したり画面を戻ったりするのではないかと思います。
そのための処理を簡単に記述できるようなパッケージを作成しました。
前提として実行される処理はすべてFutureで待つようになっているとします。
下記のように簡単に書けます。
final future = repository.save(); // なにかしらの保存処理（Future<dynamic>を返す）
await future.showIndicator(context); // 処理が終了するまでインジケーターを表示してユーザーに操作させない
// ダイアログを表示
katana_modelはCRUDの操作がすべてFutureで待てるようになっているため保存処理を簡潔に書くことができます。
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();
}
);
インストール
下記のパッケージをインポートします。
flutter pub add katana_indicator
使い方
基本的にFutureで用意されているエクステンションのメソッドを利用するだけです。
final doc = collection.create();
await doc.save({
"first": "masaru",
"last": "hirose",
"type": "kanimiso",
}).showIndicator(context);
context.router.pop();
インジケーターはCircularProgressIndicatorがデフォルトで利用されています。
これを変更したい場合はshowIndicatorのindicatorパラメーターを利用してください。
await doc.save({
"first": "masaru",
"last": "hirose",
"type": "kanimiso",
}).showIndicator(context, indicator: Center(child: LinearProgressIndicator()));
おわりに
自分で使う用途で作ったものですが実装の思想的に合ってそうならぜひぜひ使ってみてください！
また、こちらにソースを公開しているのでissueやPullRequestをお待ちしてます！
また仕事の依頼等ございましたら、私のTwitterやWebサイトで直接ご連絡をお願いいたします！
GitHub Sponsors
スポンサーを随時募集してます。ご支援お待ちしております！
Discussion