【Flutter】画面にローディング（くるくる）を表示する方法

本記事のテーマ

• Flutter で画面にローディング（くるくる）を表示する方法

表示方法

///画面上にローディングアニメーションを表示する 
Widget createProgressIndicator() {   
  return Container(     
    alignment: Alignment.center,     
    child: const CircularProgressIndicator(       
      color: Colors.green,     
     )   
  ); 
}

CircularProgressIndicator というウィジェットを使用するだけで表示することができます。

使用例

home: FutureBuilder(
  future: _checkLoginAsync(),
  builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
    if(snapshot.hasData){
      print('非同期処理終了:');
      return snapshot.data!;
    } else {
      print('非同期処理中...');
      return createProgressIndicator();
    }
  },
),

上記ソースコードのように、FutureBuilder 等で非同期処理を行なう際にローディングアニメーションを表示するのが一般的かと思います。

リモートからのデータ取得処理、ログイン判定処理等を行なっている間に、並列処理として画面をくるくるさせるといったイメージです。