Flutter

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

※この記事は3分で読めます

本記事のテーマ

【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 WidgetUtils.instance.createProgressIndicator();
    }
  },
),

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

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

FutureBuilderで非同期処理を行う方法については、以下の記事を参照してください。

https://flutter-square.com/create-widget-futurebuilder/

皆さんも是非参考にしてみてください!