Flutter animated UI

In this post we will leverage the power of flutter animation and will see how to add animation in your application.

Yes, We are going to make this animation happened. How? Lets see. In this post I will explained what animation and all that you that need to know and at the very end, You will see video link where you can find video tutorial.

Lets start with what flutter team has to say:

Flutter is UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Which means animation are obvious when we need to make beautiful UI.

• So if you have little hands on practice with flutter and ready to mingle with animation then here we go.
• In this shitty post. I will be discussing about commonly used animation in flutter and at the end we will make beautiful UI screen using those animation.

As I said we are not going to learn every animation available in flutter as it will get you bore and honestly I don’t know too. 😊

Alright lets get started with animation terms and example.

1. Hero Animation
2. SlideTransition
3. AnimatedPositioned
4. AnimatedContainer

Note: Code may seem lengthy but actually half of them are boiler plate code from main.dart. you know what i meant.

Alright, lets begin with

1. Hero Animation

Hero animation sound weird and complicated but actually it is the easiest animation I could think of in flutter.

eg. you create two page with text and image inside hero widget with tag field in each page and you are done. You got the hero animation already

Hero animation

[Source Code]:

Replace main.dart with following code

2. SlideTransition Animation

• To understand SlideTransition Animation, you need to know Animation class and Animation Controller.
• Animation Class: It is a class where we defined what type of animation you want. in this case offset. so code will loke like: Animation<Offset>
• Animation Controller : is as name says controller of animation, like how much animation you need, what duration etc.
• Now offset animation can defined using tween animation.Tween animation nothing but used for animate between two value. like opacity from 0 to 1, off set from 0 to 1. eg. below

[Source Code]:

Replace main.dart with following code

3.AnimatedPositioned

Animated position requires Stack parent widget and it is mostly used for animating widget base on position.

[Source COde]:

Replace main.dart with following code

4. AnimatedContainer

AnimatedContainer is commonly used animation in flutter application.

In this exampe we will see how to animate size. I have three animatedcontainer with initialy size to 0 and it will animated each container size from 0 to 200,300,400 as shown below.

[Source Code] :

Replace main.dart with following code

• Huu! If you made till here. Then I think you deserve a break and round of appluad. Now that you got better idea about animation, We can create beautiful animated UI showned in first gif.
• I have already done and attached the source code below. I think you can build by yourself if not prefer code or feel free to watch video tutorial as well. We will make beautiful animated UI.
• Now that you know animated UI, do you wish to know how to make custom shape in flutter. well them read this.

Flutter Shape

That all,Thanks guys, I hope you like this shitty blog. please make sure to give clap 👏 and leave some engagement. let me know in comment section if you face any issue.

Checkout more blog from CodingWithTashi. Follow me on twitter or Instagram or YouTube.

CodingWithTashi - Medium