Introducing a new Flutter widget animator

The Widget Source code at the end.

flutter_circular_animator

I saw this as an animation on Lottie and decided to convert it to a new flutter animations widget, so let’s see how to do that.

Before start reading this article, if you have experience using flutter CustomPaint please skip to the second part of the article (The arcs).

Let’s start with drawing two circles

To draw a circle we will have to make a CustomPainter class. Below is an example to draw a circle:

Make another CustomPainter for the outer circle, using the same code for now.

you can use it this way if you want to see your CustomPainter result.

Now we can use a stack to get a result like this:

and you should get a result like this:

flutter_circular_animator

The Arcs

In order to make room for our rotating icons, we have to divide our circles into few Arcs

flutter_circular_animator

We can control the start and end of each arc we already used to draw the circle in the first step.

This is a simple example of how to split a circle into two arcs.

Animations

To make the rotation animations we can use Flutter Animation to make a curved linear animations. You can create circle animations in your widget initState() like this.

You can see that we used the ReverseAnimation to make the second circle rotation reverse the first one direction

Now you have to add a few lines of code to apply these animations to your CustomPainter classes

Now you can see rotating rings around your widget, the hard part is done (not really 😂)

Drawing Icons

Hold up we’re almost there, don’t give up

This was the hardest part for me, the main challenge was to keep track of the X,Y coordination of the spaces between the two arcs to draw the Icon there. I started with the most simple shapes like cross, circle, oval, and a combination between a cross and a circle.

Here is my approach to draw some icons in the space:

Finallllllllyyyyyyyyyyyyyyyyyy you can see some animations rotating around your widget

flutter_circular_animator

you can use it directly in your applications from here:

widget_circular_animator | Flutter Package

You can see the full source code for the widget here, with a demo application here

Ezaldeen99/flutter_circular_animator: A pre-built Flutter circular animator can suit your new profile view or your any other widgets (github.com)

I hope you liked it and you will see a lot more animations here soon.