Fun Flutter Animations — Part 1 — Carrom Ball Animation

We have a ball, which moves to a random position in the screen when clicked and also changes its color.

Lets divide that into steps:

1. First we need to build the ball.
2. Next we need to move the ball to a new position when pressed on it.
3. Finally, we have to also change the color of the ball when pressed.

Building the Ball

We use a Container widget with a fixed width and height for the ball. We pass Boxshape.circle in the shape parameter for the Container BoxDecoration to give it the shape of a circle. We add a Text Widget child to the Container for the “PRESS” text. We wrap the Text Widget in a Center widget to center it inside the container. And finally, we wrap the Container inside a Card Widget so that we can give it a elevation to make the ball seem like it is floating.

Moving the Ball when Pressed

Okay now that the ball is ready, how do we move it smoothly?

We will use an AnimatedAlign Widget for that. It is similar to the Align Widget which takes a alignment parameter and aligns the child with respect to the parent. However, the difference is if we change the alignment of the widget, it will smoothly transition the widget from the previous alignment to the new alignment and make it seem like the widget is moving from one place to another. Lets see how this works.

First we have to provide a few parameters to the AnimatedAlign Widget:

1. duration -> This is the time taken for the ball to go from one point to another.
2. curve -> This is the curve followed by the ball when transitioning from one point to another. By default it is a linear curve. I have provided a easeInAndOut curve which makes it seem like the ball bounces a little while moving.
3. alignment -> The starting alignment for the ball.

Now, next is how do we move the ball when pressed. Simple, we change the alignment of the widget to a new alignment. We wrap the Card Widget with a GestureDetector widget and in its OnTap handler, we set the alignment to a new alignment, determined by the randomAlign() function.

Now lets see what the randomAlign() function does.

We return a new Alignment with a new x and y coordinate everytime the function is called. (x,y) are double values from -1.0 to 1.0. With (-1.0,-1.0) being the topLeft of the screen and (1.0,1.0) being the bottomRight of the screen. So we need to assign a random value between -1.0 & 1.0 to x & y resp.

We use the Random().nextDouble() function to get a random double value between 0 & 1.0

Then we use Random.nextBool() to get a random bool value (true or false) and then put it in the boolToSign map which maps that bool value to a +1 or -1.

Then multiplying the above 2 random values, we will get a random value between -1.0 & 1.0

3. Changing the Color

This is the easy part.

First just replace the Container widget with an AnimatedContainer widget and fill the curve, duration & color parameters.

Next in the onTap handler, also set the color to a new color using a randomColor() function.

The randomColor() function uses the Random().nextInt(7) function to get a random integer between 0 & 6 (inclusive). Then it passes the value to the intToColor Map to get a color.

And Hurray!!! Everything is done. Press on the ball and watch it move.

For the complete code please refer to my github repo here : https://github.com/realdiganta/fun-flutter-animations

To learn more about animations in Flutter please refer to the links below:

1. Implicit Animations In Flutter
2. Flutter animation library
3. Introduction to Animations in Flutter

For any questions please contact me at : digantakalita.ai@gmail.com

I would be adding new Weird & Fun Flutter Animation Articles to this Series. So for getting direct updates please follow me on medium or star my repo on github. Thank You.