How to draw custom painter not in stack in flutter? - flutter

Question

I am learning custom painter in Flutter to create my own pie chart. I draw a circle first and then draw an arc for each percentage in the list. The problem is that the arcs are in stacks. I want the arcs to draw next to the previous arc. How could I implement it? And also I want to appear their percentage in the center of each arc.
Following is my code and the screenshot of the pie chart I created:
import 'dart:math' as math;
import 'package:flutter/material.dart';
Color randomColor =
Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
class PieChart extends CustomPainter {
List<int> percent = [50, 20, 30];
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.grey
..style = PaintingStyle.fill;
double radius = math.min(size.width / 2, size.height);
// center point of the size
Offset center = Offset(size.width / 2, size.height / 2);
// draw circle
canvas.drawCircle(center, radius, paint);
for (int i = 0; i < percent.length; i++) {
// set the angle of the arc
double arcAngle = 2 * math.pi * (percent[i] / 100);
// change random color
paint.color = randomColor =
Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
.withOpacity(1.0);
// draw the arc
canvas.drawArc(Rect.fromCircle(center: center, radius: radius),
-math.pi / 2, arcAngle, true, paint);
}
}
#override
bool shouldRepaint(PieChart oldDelegate) => false;
#override
bool shouldRebuildSemantics(PieChart oldDelegate) => false;
}
Pie chart