flutter lottie animation example

Hi Guys, Welcome to Proto Coders Point, In this flutter tutorial we will talk about a flutter package called ‘Lottie‘ that helps us to load animation files that are in JSON format.

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.

lottie animal crossing

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.

Video Tutorial

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.

import 'package:lottie/lottie.dart';

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

RELATED ARTICLESMORE FROM AUTHOR