Flutterで通信中にローディングアイコンを表示する

WordySquirrelで通信中にローディング画面をいい感じに実装するために方法を模索していました。

結論としては、以下のようなローディングのオーバレイを表示させる方法に落ち着きました。

showDialogを使う

Flutterの公式にあるshowDialogを使うことで解決することにしました。

api.flutter.dev

実際に使っているコードは、現時点では公開していませんが、代わりに「ボタンを押してから2秒間表示する」コードのサンプルを張ります。

ElevatedButton(
  child: const Text('PUSH'),
  onPressed: () {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (_) => const Center(child: CircularProgressIndicator()),
    );

    Future.delayed(const Duration(seconds: 2), () {
      Navigator.of(context).pop();
    });
  },
),