Как пропустить пробелы с помощью CustomPaint с Flutter?

Question

Я пытаюсь добиться ARC во трепетании, но с «дырками».

Что у меня есть:изображение экрана

Что я хочу: получить изображение

Мой код:

      class ProgressArc extends CustomPainter {
 bool isBackground;
  Color progressColor;
  double arcLength;
  ProgressArc({
    Key? key,
    required this.isBackground,
    required this.progressColor,
    required this.arcLength,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTRB(0, 0, 300, 300);
    final startAngle = -math.pi;
    final sweepAngle = arcLength;
    final useCenter = false;
    final paint = Paint()
      ..strokeCap = StrokeCap.round
      ..color = progressColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

    var arc = canvas.drawArc(
      rect,
      startAngle,
      sweepAngle,
      useCenter,
      paint,
    );
    return arc;
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    throw UnimplementedError();
  }
}

Ребята, вы знаете, что мне делать? Я пытаюсь использовать CustomPaint, но принимая другие подходы, мне это нужно для диаграммы, библиотеки диаграмм не поддерживают эту диаграмму, которая мне нужна.

Answer 1

Надеюсь, это все еще может помочь вам.

Ниже приведен класс художника:

      class ProgressArc extends CustomPainter {
  bool isBackground;
  Color progressColor;
  double arcLength;
  int dynamicPoint;
  double gapSize;

  ProgressArc({
    Key? key,
    required this.isBackground,
    required this.progressColor,
    required this.arcLength,
    required this.dynamicPoint,
    required this.gapSize
  });

  @override
  void paint(Canvas canvas, Size size) {
    const rect = Rect.fromLTRB(0, 0, 300, 300);
    final double gap = arcLength / 180 * gapSize;
    final double angle = arcLength / dynamicPoint;

    final Paint paint = Paint()
        ..color = progressColor
        ..strokeWidth = 20
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke;

    for (int i = 0; i < dynamicPoint; i++) {
      canvas.drawArc(
        rect,
        -(gap + angle * i), // remove "-" of startAngle and sweepAngle to draw bottom half circle instead of top half
        -(angle - gap * 2),
        false,
        paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    throw UnimplementedError();
  }
}

И чтобы использовать его, я добавляю dynamicPoint для количества тире и gapSize для промежутка между двумя тире:

      CustomPaint(painter: ProgressArc(
  isBackground: true,
  progressColor: Colors.black,
  arcLength: pi,
  dynamicPoint: 4,
  gapSize: 5.0
))