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:

Lottie.asset('assets/LottieLogo1.json');

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:

class LottieAnimationExample extends StatefulWidget{
  @override
  LottieAnimationExampleState createState() => LottieAnimationExampleState();
}
class LottieAnimationExampleState extends State<LottieAnimationExample> with TickerProviderStateMixin{
}

• Now, create an AnimationController in your class.

class LottieAnimationExample extends StatefulWidget{
  @override
  LottieAnimationExampleState createState() => LottieAnimationExampleState();
}
class LottieAnimationExampleState extends State<LottieAnimationExample> with TickerProviderStateMixin{
  
  AnimationController _lottieAnimationController;
}

• Initialize this controller in initState of your class.

@override  
void initState(){    
  _lottieAnimationController = AnimationController(vsync: this);  
}

• 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:

• Instagram
• Twitter
• LinkedIn
• GitHub

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