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の使い方はマスターできましたか?
この記事の内容を応用すれば、ほぼ全カスタマイズを網羅できると思います。
参考にしていただけたら幸いです。

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (103)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More