FlutterのCircularProgressIndicatorの使い方まとめ

image

Flutterでよく使用するCircularProgressIndicatorとは

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

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

strokeWidth

CircularProgressIndicatorの色の変え方

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

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

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

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

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

紫色

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

CircularProgressIndicatorのプロパティの1つに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%)で終わります。

動きはこんな感じです。

5秒のIndicator

静的なCircularProgressIndicatorの作成

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

CircularProgressIndicator(value: 0.5)

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

CircularProgressIndicatorをタイマーに応用

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

10秒のタイマー

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

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

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

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

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

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

  
  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()CircularProgressIndicatorvalueに入れてやれば完成です!

CircularProgressIndicator(value: _value())

まとめ

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

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More