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 stop, until you are breathing!๐
- Abhishek Doshi