How to use Lottie Animation in Flutter 💖

Fond of using Animations in Flutter but do you think it is complicated? No worries! Lottie Animation is here for your rescue.

In this article, we will see how we can use Lottie Animation in Flutter to make our app look more better and awesome!

For using Lottie Animation, we need 2 things:

  • Lottie JSON File
  • lottie flutter package

We can easily get the package. But what about JSON file? 🤔

You can get free Lottie Json Files from https://lottiefiles.com/ 💙

First, download any Lottie Animation JSON File from the above link and add it to your assets folder.

Add lottie package in your pubspec.yaml file and run flutter pub get to get the dependencies.

The next step is to add Lottie Animation in your code:

This is the simplest lottie animation implementation 🥳

But this is not the best way right? No one would like to see animation continuously. So let’s implement Lottie Animation onTap of button click.

  • First, extend your class with TickerProviderStateMixin Eg:
  • Now, create an AnimationController in your class.
  • Initialize this controller in initState of your class.
  • Now, add the lottie animation in your code as below:

That’s it! We have implemented Lottie Animation in Flutter 💙

Hope you enjoyed this article!

If you loved it, you can Buy Me A Coffee!

Don’t forget to connect with me on:

Don’t stop, until you are breathing!💙
- Abhishek Doshi

Flutter Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store