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:

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.

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

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

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

--

--

Google Developer Expert โ€” Dart, Flutter & Firebase ๐Ÿ’™๐Ÿ’›

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
Abhishek Doshi

Google Developer Expert โ€” Dart, Flutter & Firebase ๐Ÿ’™๐Ÿ’›