How to add Lottie Animation to your Flutter App!
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile!
It works on Android, iOS, macOS, Linux, windows, and web
First, you must install the Lottie package in your pubspec.YAML file.
Create an assets folder and go to LottieFiles,
- Signup
- Download featured Lottie animations as JSON
- Add them to the assets folder.
I added two Lottie JSON files.
In the body of the Scaffold, Wrap with a Column and add Lottie.assets() widget which is coming from the Lottie package.
To control our animation with the help of the animation controller therefore I created an Elevated Button then we click on this button then we call this showDialogBox method which shows a dialog.
Inside of this ShowDialogBox Method: I have added another Lottie JSON file and now after our done animation has been completed.
- We want to hide this dialog pop-up so we do this by simply putting the controller which is the AnimatedController.
- Wrap Stateful widget with the SingleTickerProviderStateMixin{ }
- Inside of the InitState method, you want to initialize this animation controller and you can also define the duration of how long this animation should then play.
- Add a status listener to your animation controller and here you can listen to when the animation has completed and inside you can decide what you want to do. In my case, I called this Navigator.pop( ).
In the showDialogBox method, added the onLoad function in which set the controller.forward( ) so that it should start the animation.
Lastly, dispose of the animation.
Source code is available on GitHub
I hope this article was helpful to you. Thank you for taking the time to read it. Your feedback and suggestions are always welcome.
