二重タップを避けるためのローディングダイアログの作成

はじめに

非同期で

• Firestore への書き込み
• API から値を取得する
  などのケースで、よくローディングダイアログを使用しています。
  よくボタン連打してしまいますからね..
  ​
  こちらもコピペ用ツールとしてメモしておきます。
  ​
  そんなダブルタップを回避するためのローディングダイアログをツールとして残しておこうかなと。
  showDialogの中でCircularProgressIndicatorを使用します。
  ​
  
  ​

使い方

非同期の処理をshowLoadingDialogとhideLoadingDialogではさむ。
​

await showLoadingDialog(context,timeoutSec:10);
await updateDB();
hideLoadingDialog();

​
​

ローディングダイアログのコード全文

loading_dialog.dart

import 'dart:async';
import 'package:flutter/material.dart';
​
BuildContext? _loadingDialogContext;
​
Future<void> showLoadingDialog(BuildContext context,
    {int durationTime = 500}) async {
  if (_loadingDialogContext != null) {
    return;
  }
​
 //awaitは付けない
  showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) {
        _loadingDialogContext = context;
        return Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints.expand(width: 50, height: 50),
            child: const CircularProgressIndicator(
                valueColor:
                    AlwaysStoppedAnimation<Color>(Colors.blue)),
          ),
        );
      });
  await Future.delayed(Duration(milliseconds: durationTime));
  return;
}
​
Future<void> hideLoadingDialog() async {
  final _context = _loadingDialogContext;
  if (_context != null) {
    Navigator.of(_context).pop();
    _loadingDialogContext = null;
  }
}
​
​
​

結構どこでも使えると思うので、持っておくと便利なはずです！
もっと良い書き方・使い方あれば、コメント頂けたら嬉しいです。

最後に

Twitter では Flutter を中心とする技術関連の情報を発信しています！
https://twitter.com/marksaito4

お仕事の依頼は以下のメールアドレスまでご連絡をよろしくお願いします。
[e-mail]