状態の進捗状況を示すために、プログレッシブバーが使われることがあります
FlutterではLinearProgressIndicatorを利用するとリニアな変化で進捗状況を表示できます
![1x1.trans - [Flutter] LinearProgressIndicator でプログレッシブバーの作成](https://akira-watson.com/wp-content/themes/simplicity2/images/1x1.trans.gif "[Flutter] LinearProgressIndicator でプログレッシブバーの作成")
![flutter progre 04 - [Flutter] LinearProgressIndicator でプログレッシブバーの作成](https://akira-watson.com/wp-content/uploads/2024/08/flutter_progre_04.jpg "[Flutter] LinearProgressIndicator でプログレッシブバーの作成")
LinearProgressIndicator
LinearProgressIndicatorで67%を表示させるには
value に0.67 を設定すると簡単にできます
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: Center( child: LinearProgressIndicator( value: 0.67, ), ), ), ); } |
このような感じでできました
ただ、このままでは使いにくいです
![flutter progre 01 - [Flutter] LinearProgressIndicator でプログレッシブバーの作成](https://akira-watson.com/wp-content/uploads/2024/08/flutter_progre_01.jpg "[Flutter] LinearProgressIndicator でプログレッシブバーの作成")
SizedBox でラップすると見やすくなります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: Center( child: SizedBox( width: 300, height: 30, child: LinearProgressIndicator( value: 0.67, ), ), ), ), ); } |
縦横 300 x 30 サイズの SizedBox に LinearProgressIndicator を入れるとこのようになり
プログレッシブバーらしくなりました
![flutter progre 02 - [Flutter] LinearProgressIndicator でプログレッシブバーの作成](https://akira-watson.com/wp-content/uploads/2024/08/flutter_progre_02.jpg "[Flutter] LinearProgressIndicator でプログレッシブバーの作成")
バーの色と背景色は、valueColorとbackgroundColorで設定できます
|
1 2 3 4 5 |
LinearProgressIndicator( valueColor: AlwaysStoppedAnimation(Colors.redAccent), backgroundColor: Color.fromARGB(255, 244, 196, 200), ... ), |
バーの色が変わりました
![flutter progre 03 - [Flutter] LinearProgressIndicator でプログレッシブバーの作成](https://akira-watson.com/wp-content/uploads/2024/08/flutter_progre_03.jpg "[Flutter] LinearProgressIndicator でプログレッシブバーの作成")
角丸にするためには、ClipRRectをかけて
borderRadius を設定するとできます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: ClipRRect( borderRadius: BorderRadius.circular(12.0), child: const SizedBox( width: 300, height: 30, child: LinearProgressIndicator( valueColor: AlwaysStoppedAnimation(Colors.redAccent), backgroundColor: Color.fromARGB(255, 244, 196, 200), value: 0.67, ), ), ), ), ), ); } |
角丸のバーになりました
![flutter progre 05 - [Flutter] LinearProgressIndicator でプログレッシブバーの作成](https://akira-watson.com/wp-content/uploads/2024/08/flutter_progre_05.jpg "[Flutter] LinearProgressIndicator でプログレッシブバーの作成")
このままでは、進捗に応じてバーを増減させるダイナミックな動きができないので
value に変数を当てて、何らかの動きで、例えばネットのダウンロードの進捗や
カウント結果などを表示できるようにします
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
class _ProgressIndicatorState extends State<ProgressIndicator> { var _progress = 0.0; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('LinearProgressIndicator')), body: Center( child: ClipRRect( borderRadius: BorderRadius.circular(12.0), child: SizedBox( width: 300, height: 30, child: LinearProgressIndicator( value: _progress, valueColor: const AlwaysStoppedAnimation(Colors.redAccent), backgroundColor: const Color.fromARGB(255, 244, 196, 200), ), ), ), ), ), ); } } |
以降で、これらをまとめてみます
サンプルコード
動的な進捗を LinearProgressIndicator で表示させるサンプルコード
Timer を使ってバーを１秒毎に 0.01 づつ増加して 1.0 まで、100%まで継続させます
main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import 'package:flutter/material.dart'; import 'dart:async'; void main() { runApp(const MainApp()); } class MainApp extends StatelessWidget { const MainApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: ProgressIndicator(), ), ); } } class ProgressIndicator extends StatefulWidget { const ProgressIndicator({super.key}); @override State<ProgressIndicator> createState() => _ProgressIndicatorState(); } class _ProgressIndicatorState extends State<ProgressIndicator> { double _progress = 0.0; @override void initState() { Timer.periodic(const Duration(seconds: 1), (Timer timer) { setState(() { _progress += 0.01; if (1.0 <= _progress) { _progress = 0.0; timer.cancel(); } }); }); super.initState(); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('LinearProgressIndicator')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('${(_progress * 100).round()}%'), ClipRRect( borderRadius: BorderRadius.circular(12.0), child: SizedBox( width: 300, height: 30, child: LinearProgressIndicator( value: _progress, valueColor: const AlwaysStoppedAnimation(Colors.redAccent), backgroundColor: const Color.fromARGB(255, 244, 196, 200), ), ), ), ], ), ), ), ); } } |
実行結果
コードを実行させると
0から100%までバーが増加しました
(Restart: 再読み込み)
References:
LinearProgressIndicator class
SizedBox class
Timer class
ClipRRect class
