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