Check Mobile App
Read now
Start a Project

Animations in Flutter


Animations in Flutter, plays an important role in creating a better visual interaction between the App and the User.

It helps in creating the interactive UI which helps the customers to differentiate the products.

So, in this blog, we will be starting with some animations i.e. Lottie Animation  & Hero Animation  in Flutter.

Lottie Animation

We all know that Lottie refers to the animation file which can run on web, mobile platforms etc.

Now Flutter also has a package for displaying a Lottie Animation in apps.

lottie: ^0.6.0  (For Latest Version of Package – )

There are two ways in which we can display our Lottie Animation in App

  1. Lottie.Asset(‘assetname’)
  2. Lottie.Network(‘Lottiefileurl’)

Properties of  Lottie Package are –

Firstly, we have to add this package into our pubspec.yaml file. After that we need to import the package into our main.dart file.

Our code:-

The Lottie image file is taken from :- .

The final output of our code is  –

Hero Animation

Hero animation is the most simple type of animation in flutter.

In Hero Animations, it is important to specify a tag , so that the Flutter know which widget has to move on to which page in the app.

If we do not specify a tag for Hero Widget it will not work.

This animation also provides us few properties for customizing the animation part as per our need.

When we tap on the image, we will move on to another screen.

Once we tap on the image, we will be moved on to the Next Screen displaying the same widget and onTap of this image our screen gets popped out.

The final output of our code – 


In this blog, we have discussed about Lottie Animation and Hero Animation in Flutter. These are some of the basic animations to start with while working in Flutter.

I hope this blog will help you in getting some basic knowledge about these animations.

Thank you for reading!!

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.


Great Product, Great Team, and Great Support Service. And if you want to add more features to the product, they can submit any idea that comes to your mind. They really care about their clients and we are really happy and honored to deal with Webkul.

Talk to Sales


Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home