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

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

54. Flutter で CustomPainter を使って円を描く – リバース・エンジニアリング

https://tamappe.hatenadiary.com/entry/2020/05/15/200000

CustomPainterの使い方実際に円を描く四角を描く場合今日はペイント関連で好きな図形を描けるクラス CustomPainter について学習します。 api.flutter.dev CustomPainterの使い方 CustomPainter クラスを扱う場合は基本これを継承したサブクラスの中で実装します。ここでは、円を描くクラス CirclePainter を例に出して説明します。 circle_painter.dart class CirclePainter extends CustomPainter { } このようにサブクラスを宣言します。また、CirclePain…

作ったファイルは 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% が黄色の線で塗りつぶされます。