[Flutter]CircularProgressIndicatorをダイアログ(dialog)で表示するには？

どうも、ちょげ(@chogetarou)です。

CircularProgressIndicatorをダイアログで表示する方法を紹介します。

方法
使用例

方法

CircularProgressIndicatorをダイアログ表示するには、showDialogとCenterを使います。

まず、ダイアログを表示したいタイミングで、showDialogを呼び出します。

そして、showDialogの引数「builder」でCenter(child: CircularProgressIndicator)をreturnします。

showDialog(
  context: context,
  builder: (context) {
    return Center(
      child: CircularProgressIndicator(),
    );
  },
);

これでCircularProgressIndicatorをダイアログで表示することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              },
              barrierDismissible: false,
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }