I need to create an arc chart as following:

Using canvas I've created this one:

My code:
class CustomChartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Rect drawingRect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 2);
    final Paint paint2 = Paint();
    paint2.color = const Color.fromRGBO(0, 0, 0, 0.04);
    paint2.style = PaintingStyle.stroke;
    paint2.strokeWidth = 50;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint2);
    canvas.drawArc(drawingRect,
        -pi / 2 + 0.35,
        pi - 0.35,
        false,
        greenPaint);
    canvas.drawArc(drawingRect,
        pi / 2 + 0.35,
        pi - 0.35,
        false,
        orangePaint);
  }
}
How can I round edges of arcs as presented on the first picture?
As @pskink mentioned, the solution is to use Paint.strokeCap, more precisely: paint.strokeCap = StrokeCap.round
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With