【Flutter】プログレスインジケータの種類と表示方法

Flutter

Flutter における プログレスインジケータ(Progress Indicator)の種類と表示方法について紹介します!
プログレスインジケータは、処理の進行状況を表すときに使用されます。Progress が「進捗」、Indicator が「指針」といった意味になります。よく「通信中…」の表記と共にグルグル表示されるものがあると思いますが、あれもプログレスインジケータの1つです。

プログレスインジケータの種類

プログレスインジケータは、円形と線形の2種類があります。

CircularProgressIndicator

円形のプログレスインジケータは、CircularProgressIndicator を使用することで表示できます。

CircularProgressIndicator()

以下のように、円形でグルグル動くアニメーションが表示されます。

CircularProgressIndicator

LinearProgressIndicator

線形のプログレスインジケータは、LinearProgressIndicator を使用することで表示できます。

LinearProgressIndicator()

以下のように、直線で動くアニメーションが表示されます。

LinearProgressIndicator

進捗率を設定して表示する方法

処理の進捗がわからない(進捗を示せない)場合は、上記のように記述すれば勝手に延々とアニメーションが表示されます。しかし、現在の進捗がわかる場合は、その進捗に沿って表示したいです。

ProgressIndicator のプロパティである value に進捗率(0.0〜1.0)を設定することで、現在の進捗率を明確に表すことができます。
以下の例は、進捗率を 0.5 で設定した LinearProgressIndicator です。

LinearProgressIndicator(
  value: 0.5,
)
進捗値を設定したProgressIndicator

この value に変数を設定して、その変数を setState などで更新することで、処理の進捗に応じたインジケータの表示が可能です。

まとめ

プログレスインジケータの種類と表示方法について紹介しました!

  • 円形のプログレスインジケータは、CircularProgressIndicator で表示
  • 線形のプログレスインジケータは、LinearProgressIndicator で表示
  • value プロパティに進捗率を設定することで、処理の進捗を明確に表示することも可能

プログレスインジケータのデザイン変更方法については、以下の記事で詳しく紹介していますので、よろしければご参照ください。

以上で、【Flutter】プログレスインジケータの種類と表示方法 は終わりです。

参考

コメント

タイトルとURLをコピーしました