【Flutter】読み込み処理と非同期関数を一つにしてみる

こんにちは。

Flutterで開発している時に、状態管理と非同期処理を使いながら読み込み中のダイアログを出したりと、色々気を使うことがありますよね。

様々な方法があるとは思いますが、今回は個人開発中の方向けに、「読み込み -> 非同期関数 -> 読み込みダイアログのpop」までを一連の流れにする方法を紹介したいと思います。
チーム開発だったり規模感が大きいプロジェクトだともっと別の方法が取られますが、時短のため共通化したいという方は参考にしていただければと思います。

①読み込みダイアログを作成
私の場合はScreenUtilityというクラスを作成して関数を作成しているので、下記のような記述としています。

screen_utility.dart

class ScreenUtility {
  static void showLoadingDialog(BuildContext context) {
    showGeneralDialog(
      context: context,
      barrierDismissible: false,
      barrierColor: Colors.white.withOpacity(0.5),
      transitionDuration: const Duration(milliseconds: 400),
      pageBuilder: (_, __, ___) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CircularProgressIndicator(
                color: Colors.grey.shade500,
                strokeWidth: 3,
              ),
            ],
          ),
        );
      },
    );
  }
}

②一つの関数内に入れ込む
同じクラス内に入れても良いですし、お好みでなんでもやってみてください。

screen_utility.dart

  static void loadingFLow(
    BuildContext context, {
    required Future<void> Function() function,
  }) async {
    showLoadingDialog(context);
    await function();
    if (context.mounted) {
      Navigator.of(context).pop();
    }
  }

③使ってみる
例としてIconButtonで削除処理などを行う際に使ってみます。

  IconButton(
    onPressed: () {
      ScreenUtility.loadingFLow(
        context,
        function: () async {
          // 本来はこちらに非同期処理を入れますが、テストとして2秒間ダイアログを出します。
          await Future.delayed(const Duration(seconds: 2));
        },
      );
    },
    icon: const Icon(
      Icons.clear,
      size: 20,
    ),
  ),

Riverpodを使用する時は別の方法もあるのですが、簡単に統一した読み込みダイアログを持ちたい場合は楽かと思います。
ダイアログの表示文言を動的に変更する場合はまた別途工夫が必要ですが、開発していてどうしても実装したい、という場合はお声がけください。

それでは、まだ出したい記事があるので頑張って書いていきます。