※この記事は3分で読めます
本記事のテーマ
【Flutter】画面にローディング（くるくる）を表示する方法
アプリでよくあるデータ読み込み中のアニメーションってどう表現するの？
画面をくるくるさせたい！
そのような人におすすめの記事です。
データ取得中などに画面にローディングアニメーション（くるくる）を表示する方法を紹介します。
プログレスインジケータとも言ったりしますね。
この記事を読むと
- プログレスインジケータ（くるくる）の表示方法がわかる
Sponsored Links
表示方法
///画面上にローディングアニメーションを表示する
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/
皆さんも是非参考にしてみてください！
