【Flutter】CircularProgressIndicatorとLinearProgressIndicator

CircularProgressIndicator

CircularProgressIndicatorは、回転する円形のプログレスバーを表示するウィジェットです。一般的に、タスクの完了時間が不明確な場合や、データの読み込みや処理中などの非同期タスクを実行している間に使用されます。

CircularProgressIndicatorのサンプルコード

CircularProgressIndicator(
  strokeWidth: 4.0, // 線の太さを指定
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), // プログレスバーの色を指定
)

サンプルコードのUI

LinearProgressIndicator

LinearProgressIndicatorは、水平な線形プログレスバーを表示するウィジェットです。これも、タスクの完了時間が不明確な場合や、データの読み込みや処理中などの非同期タスクを実行している間に使用されます。また、進行状況をパーセンテージで示すこともできます。

LinearProgressIndicatorのサンプルコード

LinearProgressIndicator(
  value: 0.5, // 進行状況を0.0から1.0の範囲で指定 (0.5は50%)
  backgroundColor: Colors.grey, // 背景色を指定
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), // プログレスバーの色を指定
)

サンプルコードのUI

まとめ

これらのプログレスインジケータは、ユーザーにアプリケーションの進行状況を視覚的に伝えるために使用されます。どちらのウィジェットも、カスタマイズ可能な色や線の太さなど、さまざまなオプションを提供しています。