How to use Lottie Animation in Flutter 💖

  • Lottie JSON File
  • lottie flutter package
Lottie.asset('assets/LottieLogo1.json');
  • 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:

Don’t forget to connect with me on:

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

--

--

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

Abhishek Doshi

1.92K Followers

Google Developer Expert — Dart, Flutter & Firebase 💙💛