Please tell me how can I create this **Arc with Radius CustomPainter** UI Component like this Mockup Design?

There must be a gap between Start & End angle.

[![Arc with Radius](https://i.stack.imgur.com/83zRX.png)](https://i.stack.imgur.com/83zRX.png)

### Code:

```dart
class ArcPainter extends CustomPainter {
  final double angle = 310.0;

  double toAngle(double angle) => angle * pi / 180.0;

  @override
  void paint(Canvas canvas, Size size) {
    final Offset center = Offset(size.width / 2.0, size.height / 2.0);
    final double radius = size.width / 3.0;

    Paint paint = Paint()
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 8.0
      ..style = PaintingStyle.stroke
      ..color = Colors.pink;

    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      toAngle(110.0),
      toAngle(angle),
      true,
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

```

### Problem:

Here is the current output for my Arc with Radius. The problem is that borders are showing in the arc gap. I want to remove the border in the gap.

[![enter image description here](https://i.stack.imgur.com/8vaiz.png)](https://i.stack.imgur.com/8vaiz.png)