[Flutter] CircularProgressIndicator 円形プログレッシブの作成

LinearProgressIndicatorではプログレッシブバーで進捗状況を表示できましたが
円弧で進捗を示せるのが、CircularProgressIndicator です

CircularProgressIndicator

CircularProgressIndicator を簡単に作成するとこのようになります
ここでvalueをnullにすると無限に回転します

ダウンロードが継続しているがどこまでか推測できない場合に
継続している事を知らせるのに使えます

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

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: Scaffold(

body: Center(

child: CircularProgressIndicator(),

);

}

回転アニメーションが継続しています

67%を表示させるには value に0.67 を設定

child: CircularProgressIndicator(
  value: 0.67,
),

child: CircularProgressIndicator(

value: 0.67,

固定されたポジションです

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

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

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: Scaffold(

body: Center(

child: SizedBox(

width: 200,

height: 200,

child: CircularProgressIndicator(

value: 0.67,

);

}

縦横 200 x 200 サイズの SizedBox に CircularProgressIndicator を入れ大きさを調整できます
尚、サイズを200×100のような長方形にすると楕円になります

色と背景色は、valueColor と backgroundColor で設定
strokeWidth で太さを調整できます

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

CircularProgressIndicator(

valueColor: AlwaysStoppedAnimation(Colors.redAccent),

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

strokeWidth: 20.0,

...

多少太くなって、色が変わりました

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

class _ProgressIndicatorState extends State<ProgressIndicator> {
  var _progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(      
      home: Scaffold(
        appBar: AppBar(title: const Text('CircularProgressIndicator')),
        body: Center(
            child: SizedBox(
              width: 100,
              height: 100,
              child: CircularProgressIndicator( 
                value: _progress, 
                valueColor: const AlwaysStoppedAnimation(Colors.redAccent), 
                backgroundColor: const Color.fromARGB(255, 244, 196, 200), 
                strokeWidth: 20.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _ProgressIndicatorState extends State<ProgressIndicator> {

var _progress = 0.0;

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: const Text('CircularProgressIndicator')),

body: Center(

child: SizedBox(

width: 100,

height: 100,

child: CircularProgressIndicator(

value: _progress,

valueColor: const AlwaysStoppedAnimation(Colors.redAccent),

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

strokeWidth: 20.0,

);

}

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

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

サンプルコード

動的な進捗を CircularProgressIndicator で表示させるサンプルコード
Timer を使って１秒毎に 1 つづつ増加して 10 秒まで継続させます

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.1;
        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('CircularProgressIndicator')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[      
              Text('${(_progress * 10).round()} sec'),
              const SizedBox(height: 30), // spacer
              SizedBox(
                width: 100,
                height: 100,
                child: CircularProgressIndicator(
                  value: _progress,
                  valueColor: const AlwaysStoppedAnimation(Colors.redAccent),
                  backgroundColor: const Color.fromARGB(255, 244, 196, 200),
                  strokeWidth: 20.0,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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.1;

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('CircularProgressIndicator')),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text('${(_progress * 10).round()} sec'),

const SizedBox(height: 30), // spacer

SizedBox(

width: 100,

height: 100,

child: CircularProgressIndicator(

value: _progress,

valueColor: const AlwaysStoppedAnimation(Colors.redAccent),

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

strokeWidth: 20.0,

);

}

実行結果

コードを実行させると
0から10secまでのタイマーができました
(Restart: 再読み込み)

References:
CircularProgressIndicator class
SizedBox class
Timer class