Flutter：教你用CustomPaint画一个自定义的CircleProgressBar

final angle = 360.0 * progress;
final double radians = degToRad(angle);
final Rect arcRect = Rect.fromCircle(center: offsetCenter, radius: drawRadius);
final progressPaint = Paint()
…style = PaintingStyle.stroke
…strokeWidth = progressWidth;
canvas.drawArc(arcRect, 0.0, degToRad(angle), false, progressPaint);

假设当前进度为progress（范围为0.0～1.0），那么当前角度为angle = 360.0 * progress，当前弧度为radians = degToRad(angle)，上述代码可以绘制出一个基础的圆弧。但是我们会发现，圆弧的两端是平的，很影响美观，这时候就需要用到paint的strokeCap属性了。

我们将paint设置为StrokeCap.round，就能得到一个最基本的进度条了。

接下来我们给进度条添加颜色，按照设计稿，我们需要添加一个渐变色。渐变色可以通过paint的shader属性来实现：

final Gradient gradient = new SweepGradient(
endAngle: radians,
colors: [
Colors.white,
currentDotColor,
],
);
final progressPaint = Paint()
…style = PaintingStyle.stroke
…strokeCap = StrokeCap.round
…strokeWidth = progressWidth
…shader = gradient.createShader(arcRect);

Flutter提供了三种基础的用来绘制渐变效果的类：SweepGradient（扫描渐变）、LinearGradient（线性渐变）和RadialGradient（径向渐变）。

很明显，我们需要用到的是SweepGradient：

final Gradient gradient = new SweepGradient(
endAngle: radians,
colors: [
Colors.white,
currentDotColor,
],
);

注意，这里有一个很大的坑，我们可以从上面的SweepGradient事例图上看到，默认情况下是从90°的地方作为起点的，这跟我们的要求明显是不符的。SweepGradient有一个startAngle属性，那么我们是否可以将其设