Percentage ring animation with Flutter
Easily create a stateless animated ring widget
Visualizing data makes it easier to explore and understand; by using animations, you can build smooth transitions to make dynamic data appear even more dynamic.
In this story, we’ll show you how to build a stateless Flutter widget that animates a percentage of a ring. To demonstrate this, we created a small app that animates a ring arc based on the value of an input field. However, the following steps only cover the topic of how to build the animated ring widget.
Drawing an Arc
First, to be able to draw only a part of a ring, we create a class called ArcPainter
that extends the abstract class CustomPainter
.
We define three variables to be able to pass the color, the radius, and the filling level in percent the ring should have.
Because we are extending the CustomPainter
, we must override the paint()
and shouldRepaint()
methods.
For shouldRepaint()
, we return true
to repaint the ring whenever the value of a passed property changes.
Define the paint() method
With the following code inside the paint()
method, we define what the ArcPainter
should paint:
To be able to draw only a part of a ring, we use the drawArc()
method. For this, we specify the rectangle that the ring must be painted inside and the start point. Since we already imported Dart’s math package in the first code snippet, we can utilize pi.
By calculating the radian with the given percentage, we define the end point of the arc. We instantiate Paint()
with some styling, like the color and the width of the stroke.
We change the painter’s style to PaintingStyle.stroke
as we only want to draw a ring and not the entire circle.
Setting the stroke cap to StrokeCap.round
is just a personal preference.
The useCenter
property of drawArc()
is set to false
, but if you want to draw a pie chart, set it to true.
Using the ArcPainter
Next, we want to build a ring widget that stacks two ArcPainter
s, of which the lower one draws a complete and the upper one a partial ring.
We create a stateless widget called AnimatedRing
with the same three properties as the ArcPainter
. This widget builds a SizedBox
of the width and height double its given radius property.
Inside this SizedBox
, we stack two CustomPainter
s with our ArcPainter
class as painter. Where both of them get the radius passed, the first one uses the color with opacity and only the second painter uses the fillPercentage
.
Adding animation
Animating the widget is super simple by just putting a TweenAnimationBuilder
around the second of the two CustomPainter
s.
We pass a tween that begins with 0.1 (to indicate a small piece of the arc) and ends within the given duration at the passed fillPercentage
.
Finally, we change the ArcPainter
’s percentage property to the value given by the animation builder.
Conclusion
Within only three steps, you can easily create a percentage ring animation widget. And the best part is that you don’t need to use a stateful widget. Just create a custom arc painter and build it with the help of a TweenAnimationBuilder
to animate it.
If you have any questions, don’t hesitate to contact us.
Have fun coding! (by Luisa Fröhlich)