带间隙的颤振圆形进度棒

Question

我需要创建一个圆形进度条，在外圆上有间隔。当被点击时，进度条将填充空空间。

间隔带间隙的圆圈

​

​

完成圆

​

​

Answer 1

可以将CustomPainter或ClipPath与Stack结合使用。

Stack(
  alignment: Alignment.center,
  children: [
    CustomPaint(
      size: const Size(100, 100),
      painter: LoaderPaint(percentage: _sliderValue),
    ),

    /// image widget with size, or may wrap stack with sizedBox
  ],
)

疼痛类

class LoaderPaint extends CustomPainter {
  final double percentage;
  LoaderPaint({
    required this.percentage,
  });

  deg2Rand(double deg) => deg * pi / 180;
  @override
  void paint(Canvas canvas, Size size) {
    final midOffset = Offset(size.width / 2, size.height / 2);

    Paint paint = Paint()..color = Colors.black;

    canvas.drawArc(
      Rect.fromCenter(
        center: midOffset,
        width: size.width * .9,
        height: size.height * .9,
      ),
      deg2Rand(-90),
      deg2Rand(360 * percentage),
      true,
      paint,
    );
  }

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