[Flutter] LinearProgressIndicator でプログレッシブバーの作成

状態の進捗状況を示すために、プログレッシブバーが使われることがあります
FlutterではLinearProgressIndicatorを利用するとリニアな変化で進捗状況を表示できます

LinearProgressIndicator

LinearProgressIndicatorで67%を表示させるには
value に0.67 を設定すると簡単にできます

@override
Widget build(BuildContext context) {
  return const MaterialApp(
    home: Scaffold(
      body: Center(
        child: LinearProgressIndicator(
          value: 0.67,
        ),
      ),
    ),
  );
}

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: Scaffold(

body: Center(

child: LinearProgressIndicator(

value: 0.67,

);

}

このような感じでできました
ただ、このままでは使いにくいです

SizedBox でラップすると見やすくなります

@override
Widget build(BuildContext context) {
  return const MaterialApp(
    home: Scaffold(
      body: Center(
        child: SizedBox(
          width: 300,
          height: 30,
          child: LinearProgressIndicator(
            value: 0.67,
          ),
        ),
      ),
    ),
  );
}

@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 を入れるとこのようになり
プログレッシブバーらしくなりました

バーの色と背景色は、valueColorとbackgroundColorで設定できます

LinearProgressIndicator(
  valueColor: AlwaysStoppedAnimation(Colors.redAccent),
  backgroundColor: Color.fromARGB(255, 244, 196, 200),
  ...
),

LinearProgressIndicator(

valueColor: AlwaysStoppedAnimation(Colors.redAccent),

backgroundColor: Color.fromARGB(255, 244, 196, 200),

...

バーの色が変わりました

角丸にするためには、ClipRRectをかけて
borderRadius を設定するとできます

@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,
            ),
          ),
      ),
      ),
    ),
  );
}

@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,

);

}

角丸のバーになりました

このままでは、進捗に応じてバーを増減させるダイナミックな動きができないので
value に変数を当てて、何らかの動きで、例えばネットのダウンロードの進捗や
カウント結果などを表示できるようにします

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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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),

);

}

以降で、これらをまとめてみます

目次
1. サンプルコード
2. 実行結果

サンプルコード

動的な進捗を LinearProgressIndicator で表示させるサンプルコード
Timer を使ってバーを１秒毎に 0.01 づつ増加して 1.0 まで、100%まで継続させます

main.dart

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),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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