Flutter小技巧之魔改widget

算是分享一个Flutter中的小技巧，当然这也不只适用flutter的，其他的像Android中也可以，就是为了快速实现xx设计的要求，我们可以拿出系统本有的widget来魔改成我们自己的，速度而又有格调，毕竟男人不能说不行啊！

先看图，图一为系统的效果，图二为我们需要实现的，比较简单，这个当时是我们公司网页上的加载效果，需要用flutter_web来现实，着急直接改的系统的控件，话说魔改了好几个了，但是都是说用简单的图片和切换状态就可以实现的，都没用上，好遗憾🐰

图一
图二
因为是录屏转gif，效果一般，请担待。

步骤

1. 分析源码，系统的CircularProgressIndicator也是通过继承CustomPainter来画出来的，下面是关键的代码

//总的来说就是使用drawArc来画出图形，然后使用动画来更改初始角度和扇形
@override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = valueColor
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;
    if (backgroundColor != null) {
      final Paint backgroundPaint = Paint()
        ..color = backgroundColor
        ..strokeWidth = strokeWidth
        ..style = PaintingStyle.stroke;
      canvas.drawArc(Offset.zero & size, 0, _sweep, false, backgroundPaint);
    }

    if (value == null) // Indeterminate
      paint.strokeCap = StrokeCap.square;
    canvas.drawArc(Offset.zero & size, arcStart, arcSweep, false, paint);
  }

2. 分析目标结构：看到上图，我们目标就是四个圆点在转动，那好，我们就先画出四个圆点。

@override
  void paint(Canvas canvas, Size size) {
    valueColorPaint = Paint()
      ..color = valueColor
      ..style = PaintingStyle.fill;

    if (backgroundColor != null) {
      valueColorPaint = Paint()
        ..color = backgroundColor
        ..style = PaintingStyle.fill;
    }

    if (oneLeadColor != null) {
      oneLeadCirclePaint = Paint()
        ..color = oneLeadCol