Skip to content

Latest commit

 

History

History
94 lines (81 loc) · 2.79 KB

700943755e9f98.md

File metadata and controls

94 lines (81 loc) · 2.79 KB
Raw
title emoji type topics published
二重タップを避けるためのローディングダイアログの作成
🍣
tech
Flutter
Dart
tool
true

はじめに

非同期で

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

使い方

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

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

​ ​

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

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

お仕事の依頼は以下のメールアドレスまでご連絡をよろしくお願いします。 mark.saito@jp-gx.com