Flutterでローディング表示する方法

Flutterで非同期処理中のローディング表示をしたいときに便利なのがCircularProgressIndicatorです。

CircularProgressIndicatorとは、通信中などによく表示される、円形のローディングインジケーターを表示するウィジェットです。

この記事では、基本的な使い方からカスタマイズ方法まで解説します。

基本的な使い方

CircularProgressIndicator()

これだけで円形のローディングが表示されます。
中央に配置したい場合は、Centerで囲みます。

Center(
  child: CircularProgressIndicator(),
)

色を変更する

CircularProgressIndicator(
  color: Colors.blue,
)

背景色を設定する

CircularProgressIndicator(
  color: Colors.blue,
  backgroundColor: Colors.grey[300],
)

太さを変更する

strokeWidthで円の太さを変更できます。

CircularProgressIndicator(
  strokeWidth: 6.0,
)

よくある使い方（画面全体ローディング）

画面全体を覆うローディングの例です。

Stack(
  children: [
    // メイン画面
    YourMainWidget(),

    // ローディング
    if (isLoading)
      Container(
        color: Colors.black.withOpacity(0.3),
        child: Center(
          child: CircularProgressIndicator(),
        ),
      ),
  ],
)

シンプルに使え、カスタマイズも簡単にできるため、扱いやすいウィジェットです。