Flutter – Transforming Animations

Hi Friends,

Hope you are all well. In this post let’s talk about transforming animations, or in simple changing a shape into another.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affliate link)

This is a sequel to my previous posts on Animations, If you haven’t read them yet I would kindly advise you to do so by clicking the below links.

Basics of Animation – Click here.

Delayed Animations – Click here.

Parenting Animations – Click here.

Let’s begin.

A screencast of this post.

Alright, now here’s a simple gif of what we’ll be doing.

We are literally transforming the shape of a widget into another (at the same time the end widget also gets enlarged, but this is optional).

Alright, let’s do this with flutter.

Create a new flutter app and add the below code to main.dart file

Now let’s  talk about the animations.

In the above snippets we define both the animations. One for increasing the size of the container and one for tweaking the border radius of the container. Notice that the border radius is 150.0 when the animation starts and when it ends it becomes 0.0 or in other words it becomes a rectangle.

Now in the Animated Builder we have the below code.

We have a simple Container whose height and width correspond to whatever the animation gives it. i.e., 10.0 to 200.0 (look at the previous snippet). We also have a box decoration inside the container whose radius we are getting from the transformationAnim (Again, please look at the previous snippet).

Note that I have used an image inside the BoxDecoration so that users would be able to see visually what’s happening, you can place any content that you want here. (Since I am using an Asset Image, I have also added it to pubspec.yaml file as shown below)

Now try running the app and watch what happens.

Cool right? We’ll talk about a different type of animation in our next video.

Hope this helped you guys, if you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!