Flutter における プログレスインジケータ（Progress Indicator）の種類と表示方法について紹介します！
プログレスインジケータは、処理の進行状況を表すときに使用されます。Progress が「進捗」、Indicator が「指針」といった意味になります。よく「通信中…」の表記と共にグルグル表示されるものがあると思いますが、あれもプログレスインジケータの1つです。
プログレスインジケータの種類
プログレスインジケータは、円形と線形の2種類があります。
CircularProgressIndicator
円形のプログレスインジケータは、CircularProgressIndicator を使用することで表示できます。
CircularProgressIndicator()以下のように、円形でグルグル動くアニメーションが表示されます。
LinearProgressIndicator
線形のプログレスインジケータは、LinearProgressIndicator を使用することで表示できます。
LinearProgressIndicator()以下のように、直線で動くアニメーションが表示されます。
進捗率を設定して表示する方法
処理の進捗がわからない（進捗を示せない）場合は、上記のように記述すれば勝手に延々とアニメーションが表示されます。しかし、現在の進捗がわかる場合は、その進捗に沿って表示したいです。
ProgressIndicator のプロパティである value に進捗率（0.0〜1.0）を設定することで、現在の進捗率を明確に表すことができます。
以下の例は、進捗率を 0.5 で設定した LinearProgressIndicator です。
LinearProgressIndicator(
value: 0.5,
)
この value に変数を設定して、その変数を setState などで更新することで、処理の進捗に応じたインジケータの表示が可能です。
まとめ
プログレスインジケータの種類と表示方法について紹介しました！
- 円形のプログレスインジケータは、CircularProgressIndicator で表示
- 線形のプログレスインジケータは、LinearProgressIndicator で表示
- value プロパティに進捗率を設定することで、処理の進捗を明確に表示することも可能
プログレスインジケータのデザイン変更方法については、以下の記事で詳しく紹介していますので、よろしければご参照ください。
以上で、【Flutter】プログレスインジケータの種類と表示方法 は終わりです。
コメント