Flutterで画面全体をマスクするローディングダイアログ

通信中に、AppBarも含めた画面全体をマスクしてローディングの表示をしたかったので調べました。

スクリーンショット 2021-06-11 19.44.25

・ローディングダイアログを開く

showGeneralDialog(
   context: context,
   barrierDismissible: false,
   transitionDuration: Duration(milliseconds: 250), // ダイアログフェードインmsec
   barrierColor: Colors.black.withOpacity(0.5), // 画面マスクの透明度
   pageBuilder: (BuildContext context, Animation animation,
       Animation secondaryAnimation) {
     return Center(
       child: CircularProgressIndicator(), 
     );
   });

・ローディングダイアログを閉じる

// 3秒待つ
await new Future.delayed(new Duration(seconds: 3));

//ローディングダイアログを閉じる
Navigator.pop(context);

これを、昨日の記事の「Notion API/Retrieve a database」「Notion API/Update page properties」を呼び出すところで表示する予定です。

コメント

タイトルとURLをコピーしました