アプリの進捗状況を 視覚的に分かりやすく表示する ために、プログレスバーはよく使われます。しかし、単にバーが伸びるだけでは 今どのくらい進んでいるのか が直感的に分かりにくいこともあります。
そこで今回は、Flutterで プログレスバーに進捗を数値（％）で追加表示する 実装方法を紹介します。
具体的には、LinearProgressIndicator や CircularProgressIndicator を活用し、バーの中央にテキストで進捗率を表示する 方法を紹介します。
プログレスバーを もっと分かりやすく、使いやすくしたい 方はぜひ参考にしてみてください！
プログレスバーの基本
Flutter には、プログレスバーを表示するためウィジェットとして、LinearProgressIndicator と CircularProgressIndicator の2種類が用意されています。
基本的な使い方やデザイン変更方法については、以下の記事で詳しく紹介していますのでご参照ください。
進捗（%）表示を追加した ProgressIndicator の実装方法
基本構成としては、Stack を使用してプログレスバーの上にテキストを重ねるようにしています。
LinearProgressIndicator
LinearProgressIndicator の中央に進捗表示を追加した実装例が以下となります。
Stack(
alignment: Alignment.center,
children: [
LinearProgressIndicator(
value: value,
minHeight: 30,
backgroundColor: Colors.blue,
valueColor: const AlwaysStoppedAnimation(Colors.indigo),
),
Text(
"${(value * 100).toStringAsFixed(0)}%",
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),実行結果は、以下のようになります。
CircularProgressIndicator
CircularProgressIndicator の中央に進捗表示を追加した実装例が以下となります。
Stack(
alignment: Alignment.center,
children: [
SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
value: value,
valueColor: const AlwaysStoppedAnimation(Colors.orange),
backgroundColor: Colors.yellow,
strokeWidth: 20,
),
),
Text(
"${(value * 100).toStringAsFixed(0)}%",
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
],
),実行結果は、以下のようになります。
まとめ
Flutter でプログレスバーに進捗（％）を表示する方法について紹介しました！
- Stack を使用してプログレスバーの上にテキストを重ねることで進捗表示可能
以上で、【Flutter】プログレスバーにテキストで進捗表示（%表示）を追加する方法 は終わりです。
コメント