FlutterのCircularProgressIndicatorの使い方まとめ

Flutterでよく使用するCircularProgressIndicatorとは

Flutter製のアプリでは、たびたび使用される上のようなグルグルの事です。
ローディングなどの待ち時間に表示することが多いですが、ダウンロードの進捗状況を表したり、タイマーに使用したりなど、 色やアニメーションを変えることでさまざまなカスタマイズができます。
今回は知っておくとよいCircularProgressIndicatorのカスタマイズ方法をまとめてご紹介します。
(Flutter ver.2.2です)

CircularProgressIndicatorのサイズの変え方

これはとてもシンプルです。
以下のようにSizedBoxで括ってheight,widthを指定してやるだけでOK！

SizedBox(
    height: 50, //指定
    width: 50,　//指定
    child: CircularProgressIndicator(),
        )

CircularProgressIndicatorの太さの変え方

これもとてもシンプルです。
プロパティの一つであるstrokeWidthを指定してやりましょう。
デフォルトでは、4.0になっているので、8.0に変えてみましょう。

SizedBox(
     height: 50,
     width: 50,
     child: CircularProgressIndicator(strokeWidth: 8.0),
        )

太さを変更すると以下の画像のような感じになります。

CircularProgressIndicatorの色の変え方

色の変え方は以下の2パターンあります。

1.ThemeData内のprimarySwatchの色を指定する

CircularProgressIndicatorの色はデフォルトで青色になっています。
そこで以下のように、Flutterのテーマ内のprimarySwatchにカラーを指定してやることで色を変更できます。

Theme(
    data: ThemeData(primarySwatch: Colors.purple),
    child: const CircularProgressIndicator(),
          )

この例では、以下の画像のように紫色にしてみました。

2.CircularProgressIndicatorのプロパティのvalueColorを指定する

CircularProgressIndicatorのプロパティの１つにvalueColorというものがあります。
ここで色を指定してやることで、色を変更できます。

CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation(Colors.yellow),
          )

AlwaysStoppedAnimationという型で指定するので、少し特殊ですが。
変更後の色は以下の通りです(黄色)

背景色も指定できる

今まで示した例では、色がついている部分以外は白色になっていました。
したがって、画面の白い背景と重なって見えなくなっていたわけです。
しかし、背景色を指定してやれば色(今回は緑)がついていない部分にも色を持たせることができます。
それでは、背景色を黒色Colors.blackにしてみましょう。 backgroundColorを指定してやります。

CircularProgressIndicator(backgroundColor: Colors.black)

すると以下のようになります。

CircularProgressIndicatorのアニメ-ションのカスタマイズ

普段は勝手にぐるぐると回っていますが、このアニメーションをカスタマイズすることもできます。
5秒かけて、ぐるっと一周するアニメーションを作ってみましょう。
コードは以下の通りです。

TweenAnimationBuilder<double>(
     tween: Tween<double>(begin: 0, end: 1),
     duration: const Duration(milliseconds: 5000),
     builder: (context, value, _) =>
         CircularProgressIndicator(value: value),
          )

Durationで秒数を指定し、Tween内のbegin,endで色の占める割合を決定します。 この例では、0(緑色の部分が0%)から始まり、1(緑の部分が100%)で終わります。

動きはこんな感じです。

静的なCircularProgressIndicatorの作成

アニメーションがあるものがよく使われるイメージですが、静的なCircularProgressIndicatorも作ることができます。
最も簡単な例を示します。
静的で色が占める割合が50%のものは以下のようなコードで作成できます。

CircularProgressIndicator(value: 0.5)

value = 0.5を指定するだけです。
valueを指定すると静的になります。(valueの値に応じて表示が変更できる)

CircularProgressIndicatorをタイマーに応用

valueをうまく使えば、タイマーなどに応用可能です。
時計であれば、60秒・60分で一周しますね。
ここでは10秒で１周するタイマーのようなものを作ってみます。
上記のアニメーションのカスタマイズとの相違点は、「10秒で１周する」ことを繰り返す点です。
以下のようになります。

こちらは今まで紹介したものより少し複雑なので、全コードを載せます。

import 'dart:async';
import 'package:flutter/material.dart';

class CircularProgressIndicatorDemo extends StatefulWidget {
  @override
  _CircularProgressIndicatorDemoState createState() =>
      _CircularProgressIndicatorDemoState();
}

class _CircularProgressIndicatorDemoState
    extends State<CircularProgressIndicatorDemo> {
  Timer? _timer;
  int _second = 0;

  @override
  void initState() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) async {
      setState(() {
        _second = DateTime.now().second;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: SizedBox(
          height: 50,
          width: 50,
          child: CircularProgressIndicator(value: _value()),
        ),
      ),
    );
  }

  double _value() {
    return (_second % 10) / 10;
  }
}

コードを軽く解説します。

initState内で1秒に一回、秒数をsetStateで更新

_secondの値には、現在時刻の秒数を指定しています。

_timer = Timer.periodic(const Duration(seconds: 1), (timer) async {
      setState(() {
        _second = DateTime.now().second;
      });
    });

最新の秒数を割った余りを用いて10秒タイマーに

_second % 10は現在の秒数を10で割った余りです。 なので、0から9のどれかになります。
したがって、_value()の値は0、0.1,0.2 ....0.9と1秒ごとに変化します。

double _value() {
    return (_second % 10) / 10;
  }

最後に上記の_value()をCircularProgressIndicatorのvalueに入れてやれば完成です！

CircularProgressIndicator(value: _value())

まとめ

いかがでしたでしょうか。
FlutterのCircularProgressIndicatorの使い方はマスターできましたか？
この記事の内容を応用すれば、ほぼ全カスタマイズを網羅できると思います。
参考にしていただけたら幸いです。