A Lottie animation – for flutter
The Lottie is a website that provides some free animation image files in JSON format that we can add in our flutter application to display pre-built animation like ‘Lottie animal crossing’ as shown below.
A Lottie is a pre-built Animation that is in JSON format, For the JSON file, we can simply add it in our flutter assets folder & use them to display Lottie animation in the flutter app.
The Flutter Lottie is a package library that parses Adobe After Effect animation file exported in JSON file & renders them natively on mobile device app.
It works greatly and smoothly on Windows, Web, Linux, iOS, and Android Devices.
How to install/add flutter Lottie package in flutter project
1. Add lottie dependence
In your flutter project you will find a file by name pubspec.yaml open it and under dependencies section add the library.
dependencies: lottie: ^1.0.1
after adding new dependencies just click on pub get button
2. Import the lottie dart file
Now once you have added the lottie dependencies now you can use it anywhere in your flutter project.
then, to use it you just need to import lottie.dart package in your dart file.
3. Download animated json file from Lottie files website
Now Visit https://lottiefiles.com/ and download your choice json animation file from lottiefiles.com
4. Create a Assets folder to store lottie animation json file
Now create a new flutter assets folder in your project and give the access to it in pubspec.yaml so that your flutter project can access the folder
if you are new to it refer below screenshot
Then as you can see I have created the folder ‘ assets/lottieJSON/….’ in which I have copied the downloaded json animation file from lottiefiles.com and then in pubspec.yaml file i have added the file path to the assets directory.
5. Snippet code to use Lottie widget flutter
Load json animation from assets folder
Lottie.asset( 'assets/lottieJSON/animal_crossing.json', width: 200, height: 200, fit: BoxFit.cover ),
Loading animation json file from network URL
Here is a url of lottie moon christmas offering json animation
Lottie.network( "https://assets3.lottiefiles.com/packages/lf20_jaejabqz.json", width: 200, height: 200, fit: BoxFit.cover ),
Loading animated json file from zip file
Lottie.asset( "assets/lottieJSON/christmas.zip", width: 200, height: 200, fit: BoxFit.cover ),
Output of above Lottie widget