Flutter 圆形进度条，间隔有间隙答案

【问题标题】：Flutter Circular Progress bar with gap at intervalsFlutter 圆形进度条，间隔有间隙
【发布时间】：2022-01-18 16:11:08
【问题描述】：

我需要在外圈创建一个带有间隔的圆形进度条。进度条在被点击时会填充空白处。

有间隔的圆圈

完成的圈子

【问题讨论】：

您是否使用了像 PNG 这样的资产图片？
是的。它们是 PNG 图像。

标签： flutter flutter-layout flutter-animation

【解决方案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;
  }
}

【讨论】：

嗨，Yeasin Sheikh，我有一个圆形的黑色盒子。更改 sliderValue 没有结果
你在上面放了一张图片吗？