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
TickerProviderStateMixinEg:
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 💙
Don’t stop, until you are breathing!💙
- Abhishek Doshi
