0

enter image description here

I try to make custom progress indicator with Custom painter but painter is not updating the value

help:

can you help me to use custom painter?

also can we change circle pointer to square box with arrow pointing to progress

class MyCsPaint extends CustomPainter {
 MyCsPaint({required this.progress});
 final double progress;

 @override
 void paint(Canvas canvas, Size size) {
 Paint paintBg = Paint()
   ..color = Colors.teal.shade100
   ..strokeWidth = 1
   ..strokeCap = StrokeCap.round;
 
 Paint paint = Paint()
   ..color = Colors.teal
   ..strokeWidth = 5
   ..strokeCap = StrokeCap.round;

 Offset p1bg = Offset(size.width, size.height);
 Offset p2bg = Offset(0, size.height);

 Offset p2 = Offset(0, size.height);
 Offset p1 = Offset(size.width * progress, size.height);

 canvas.drawLine(p1bg, p2bg, paintBg);
 canvas.drawLine(p1, p2, paint);

 Offset pc = Offset(size.width * progress, size.height * .7);
 canvas.drawCircle(pc, 10, paint);

 final textStyle = ui.TextStyle(
   color: Colors.black,
   fontSize: 16,
 );
 final paragraphStyle = ui.ParagraphStyle(
   textDirection: TextDirection.ltr,
 );
 final paragraphBuilder = ui.ParagraphBuilder(paragraphStyle)
   ..pushStyle(textStyle)
   ..addText('${progress * 100} %');
 final constraints = ui.ParagraphConstraints(width: size.width);
 final paragraph = paragraphBuilder.build();
 paragraph.layout(constraints);
 canvas.drawParagraph(paragraph, pc);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
  return true;
 }
}

0 Answers0