Dart

55. CustomPainter を使ってサークルプログレスを作成する

CustomPainter を使ってサークルプログレスを作成する

今回は前回に学習した CustomPainter を使って実際にサークル状のプログレスの雛形を作成していきたいと思います。

作ったファイルは circle_progress.dart になります。

circle_progress.dart

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

class CircleProgress extends CustomPainter {
  double currentProgress;

  CircleProgress(this.currentProgress);

  @override
  void paint(Canvas canvas, Size size) {
    Paint outerCircle = Paint()
      ..strokeWidth = 5
      ..color = Colors.black
      ..style = PaintingStyle.stroke;
    Paint completeArc = Paint()
      ..strokeWidth = 5
      ..color = Colors.yellowAccent
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    Offset center = Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2) - 7;

    canvas.drawCircle(center, radius, outerCircle);

    double angle = 2 * pi * (currentProgress / 100);
    canvas.drawArc(
        Rect.fromCircle(center: center, radius: radius), -pi / 2, angle, false, completeArc);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

プロパティ currentProgress には進捗の値を渡す想定です。
例えば、currentProgress に 50 を渡すと 50% が黄色の線で塗りつぶされます。

CircleProgress(50)
f:id:qed805:20200512003937p:plain:w300

50%の進捗を表すCircleProgress

あとはこれに currentProgress に動的な値を渡すアニメーションを実装すれば、グルグル回るプログレスバーが完成します。
次回は実際にこれにアニメーション処理を付与するところをお話しようと思います。
ということでアニメーションの勉強は次回になります。

それでは、バイバイ。

ABOUT ME
tamappe
都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。