Flutter – Animations

Hi Friends,

Hope you are all well. In this post, let’s see how to do some basic animations in your Flutter apps.

Let’s begin.

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

Other flutter courses – here. (Affliate link)

A video screencast of this post:

First of all, let’s talk a little about animations. Animations are the best way to provide eye-candy stuff to any user and enhance his experience while using our app. In flutter we use a separate component called Animation. The animation object is the one that get values and performs animations on the screen. It has a bunch of listeners, which we can use to perform actions in each and every frame.

We’ll also be using a controller, a tween for specifying a begin and end value and an Animated Builder which is the one that actually animation by providing a widget.

Alright dude, let’s get on with it. Come on, show us what we are going to do..

This is a beginner post. So I’ll show you how to do a very simple animation. We’ll make a login form fly into our screen as shown below.

Webp.net-gifmaker (4)

That’s cool, So how do we do it ?

Let’s begin.

Create a new Flutter app. Open main.dart file and modify it as shown below.

Let’s break this down.

It’s pretty much self-explanatory. We create an object for Animation and AnimationController. The AnimationController literally controls the aspects of the animation and allows us to tweak it as we want.

We are also overriding the init state where we set the animation properties and start it with this line.

Breaking down the animation itself., the tween is something in which you specify the input output range. Here begin is set to -1 and end is 0.0 which means the animation happens from out of the screen to the center of the screen. or rather, from the left most edge to the center of the app. We are also doing an ease in animation, so we specify the curve as fast out slow in.

Alright. Now let’s move on to what we are actually going to animate in the first place; i.e., the login form.

Add more code into main.dart file as shown below. Your final main.dart file would look like this.

Oooh.. That’s too much code ain’t it ?

Well, most of it is just stuff that gives us a couple of text fields and a couple of buttons placed inside a container. This container is then moved along the x-axis from -1 to 0.0 (Remember the tween). This is done inside an AnimatedBuilder which is what is used to perform this whole animation.

Now run this app, you’ll see a nice form fly into the screen from the left side to the center.

That’s it, the nice ease in animation.

Next steps:

  1. Try changing the tween values from -1.0, 0.0 to 1.0,0.0
  2. Try using a different curve other than fastOutSlowIn

This is how animations are brought into our flutter apps guys. Obviously there is a lot more to this, you could do advanced stuff, chain multiple animations together and do a lot of other wonderful stuff as well which we’ll discuss in the forthcoming stuff.

Donate – Click here.

Join our discord community – Click here.

Thanks for reading. Peace.. :)

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