Filled circle progress bar [closed] - flutter

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 months ago.
Improve this question
Does anyone know how to do filled circle progress bar like on a picture?

Answer 1

You can use CustomPainter
class CirclePaint extends CustomPainter {
final double value;
CirclePaint(this.value);
#override
void paint(Canvas canvas, Size size) {
final area = Rect.fromCircle(
center: size.center(Offset.zero), radius: size.width / 2);
canvas.drawArc(
area, -pi / 2, 2 * pi * value, true, Paint()..color = Colors.amber);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
And play with this widget and change the color you like to have.
double value = .4;
final size = 200.0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Slider(
value: value,
onChanged: (v) {
setState(() {
value = v;
});
},
),
Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.blue,
width: 4,
),
),
child: CustomPaint(
painter: CirclePaint(value),
),
),
],
),
),
);
}
Find more about CustomPaint
With Listenable repaint as pskink mentioned on comment
class Psf extends StatelessWidget {
const Psf({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
ValueNotifier<double> value = ValueNotifier(.3);
const size = 200.0;
return Scaffold(
body: Center(
child: Column(
children: [
Slider(
value: value.value,
onChanged: (v) {
value.value = v;
},
),
Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.blue,
width: 4,
),
),
child: CustomPaint(
painter: CirclePaint(value),
),
),
],
),
),
);
}
}
class CirclePaint extends CustomPainter {
final ValueNotifier<double> value;
CirclePaint(this.value) : super(repaint: value);
#override
void paint(Canvas canvas, Size size) {
final area = Rect.fromCircle(
center: size.center(Offset.zero), radius: size.width / 2);
canvas.drawArc(area, -pi / 2, 2 * pi * value.value, true,
Paint()..color = Colors.amber);
}
#override
bool shouldRepaint(covariant CirclePaint oldDelegate) =>
oldDelegate.value != value;
}
With custom decoration as #pskink included, you need to use some custom snippet for this, check them here
Container(
width: size,
height: size,
decoration: AnimatedDecoration(
listenable: value,
onPaintFrame: (canvas, bounds, double v) {
canvas.drawArc(bounds, -pi / 2, 2 * pi * v, true,
Paint()..color = Colors.amber);
},
),
),