Lottie Flutter | Animation Library For Mobile Apps

In this tutorial we will learn how to use Lottie Animation In Flutter Applications.

What Is Lottie In Flutter?

Lottie is an animation, which will provide the way of using animated files. It is a mobile library for android and ios that Parses Adobe After Effects exported as json with Bodymovin. To use the lottie follow the below steps:

Add Lottie Dependency

In the pubspec.yml file add the below dependency and click on pub get.

lottie: ^1.2.1

You can add this in the other way by running the following command in the android studio:

flutter pub add lottie

Flutter Lottie pubspec — Flutter pubspec

Then import the class in which file you want to use the lottie.

import 'package:lottie/lottie.dart';

Example Of Lottie Animation

The following example shows that how to display a Lottie Animation in the simplest way.


import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class TestClass extends StatefulWidget {
  const TestClass({Key key}) : super(key: key);

  @override
  _TestClassState createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Lottie Demo"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.only(top: 30),
              child: Center(
                child: Lottie.network(
                    'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Result

Using Lottie File From Assets Folder In Flutter

We can also use the downloaded json file of Lottie from the assets folder in the following way. Put the downloaded Lottie json file into the assets folder in android studio. The Lottie widget will load the json file and run the animation indefinitely.


import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class TestClass extends StatefulWidget {
  const TestClass({Key key}) : super(key: key);

  @override
  _TestClassState createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Lottie Demo"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.only(top: 30),
              child: Center(
                  child: Column(
                children: [
                  // Load a Lottie file from your assets
                  Lottie.asset('assets/calendario.json'),

                  // Load a Lottie file from a remote url
                  Lottie.network(
                      'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
                ],
              )),
            ),
          ],
        ),
      ),
    );
  }
}

The Lottie has several convenient constructor those are (Lottie.asset, Lottie.network, Lottie.memory). As we used the Lottie Animation in above examples, we can use the json file from the assets folder, from the network URL and from the memory.

You can learn more about Lottie Animation from the dev website by clicking here.

Thank You for visiting the tutorial on FlutterTpoint. Hope you get your point. Please visit more useful Flutter Tutorials. These tutorial will improve your development skills for Flutter applications.