canvas.save();
canvas.translate(width / 2, height / 2);
canvas.rotate( -pi / 2);
canvas.drawArc(Rect.fromCenter(center: const Offset(0, 0), width: width, height: height), pi / 2, pi * 2 , false, whiteCirclePaint);
var path = Path();
path.addArc(Rect.fromCenter(center: const Offset(0, 0), width: width, height: height), -0.1 , - pi * 2 * percent);
drawShadows(canvas,path,[
BoxShadow(
color: const Color(0x80258DFF),
offset: Offset(0, 4.h),
blurRadius: 16.h,
blurStyle: BlurStyle.outer
)
]);
drawPaint.style = PaintingStyle.stroke;
drawPaint.strokeWidth = 20.w;
drawPaint.strokeCap = StrokeCap.round;
drawPaint.shader = ui.Gradient.sweep(
const Offset(0,0),
[
const Color(0xFF238DFF),
const Color(0xFFD1FFFB),
],
null,
TileMode.decal,
0,
2 * pi
);
canvas.drawPath(path, drawPaint);
canvas.restore();
//根据path 绘制阴影
void drawShadows(Canvas canvas, Path path, List<BoxShadow> shadows) {
for (final BoxShadow shadow in shadows) {
final Paint shadowPainter = shadow.toPaint()
//这个需要设置 因为只是想让path 路径周围有阴影
shadowPainter.style = PaintingStyle.stroke
shadowPainter.strokeWidth = 10.w
if (shadow.spreadRadius == 0) {
canvas.drawPath(path.shift(shadow.offset), shadowPainter)
} else {
Rect zone = path.getBounds()
double xScale = (zone.width + shadow.spreadRadius) / zone.width
double yScale = (zone.height + shadow.spreadRadius) / zone.height
Matrix4 m4 = Matrix4.identity()
m4.translate(zone.width / 2, zone.height / 2)
m4.scale(xScale, yScale)
m4.translate(-zone.width / 2, -zone.height / 2)
canvas.drawPath(path.shift(shadow.offset).transform(m4.storage), shadowPainter)
}
}
}
