flutter - 如何创建这样的渐变进度指示器？

Question

我注意到基本的 CircularProgressIndicator 小部件很少有参数可以自定义它。我想达到像 gif 那样的结果。不幸的是，我的知识不足以从头开始创建这样一个指标，在 pub.dev 上的搜索没有带来任何结果。

Answer 1

制作一个 CustomPainter 来画圆。使用 SweepGradient(...).createShader(...) 应用渐变效果。

用 RotationTransition 包裹小部件以使小部件旋转。

制作旋转小部件的动画。

代码:
循环进度指示器小部件:

class GradientCircularProgressIndicator extends StatelessWidget {
  final double radius;
  final List<Color> gradientColors;
  final double strokeWidth;

  GradientCircularProgressIndicator({
    @required this.radius,
    @required this.gradientColors,
    this.strokeWidth = 10.0,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size.fromRadius(radius),
      painter: GradientCircularProgressPainter(
        radius: radius,
        gradientColors: gradientColors,
        strokeWidth: strokeWidth,
      ),
    );
  }
}

class GradientCircularProgressPainter extends CustomPainter {
  GradientCircularProgressPainter({
    @required this.radius,
    @required this.gradientColors,
    @required this.strokeWidth,
  });
  final double radius;
  final List<Color> gradientColors;
  final double strokeWidth;

  @override
  void paint(Canvas canvas, Size size) {
    size = Size.fromRadius(radius);
    double offset = strokeWidth / 2;
    Rect rect = Offset(offset, offset) &
        Size(size.width - strokeWidth, size.height - strokeWidth);
    var paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth;
    paint.shader =
        SweepGradient(colors: gradientColors, startAngle: 0.0, endAngle: 2 * pi)
            .createShader(rect);
    canvas.drawArc(rect, 0.0, 2 * pi, false, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

动画 Controller :

AnimationController _animationController;

  @override
  void initState() {
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 1));
    _animationController.addListener(() => setState(() {}));
    _animationController.repeat();
    super.initState();
  }

用法:

RotationTransition(
  turns: Tween(begin: 0.0, end: 1.0).animate(_animationController),
  child: GradientCircularProgressIndicator(
    radius: 50,
    gradientColors: [
      Colors.white,
      Colors.red,
    ],
    strokeWidth: 10.0,
  ),
),

结果: