Lottie animation in Flutter application

What is Lottie animation?

A Lottie is a JSON-based animation file format. The Lottie animation files can be used in cross-platform applications as static assets.

Integrating Lottie in the Flutter app

In this shot, you’ll be learning to display a Lottie animation in the center of the screen via the HTTP URL.

Adding dependency

The Flutter package lottie needs to be added in pubspec.yaml, as shown below:

dependencies:
  flutter:
    sdk: flutter

  //add lottie dependency
  lottie: ^0.4.1

Using Lottie files

Lottie files are a simple Flutter app with only one page. The screen has an app bar and Center widget to place the animation in the middle of the screen. The Lottie.network() takes the URL of the JSON animation file and renders the animation.

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

//Entry point to LottieDemoApp
void main() => runApp(LottieDemoApp());

class LottieDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Lottie Demo"),
        ),
        //Animation is
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
//Lottie animation is added a child widget
              child: Lottie.network("https://assets5.lottiefiles.com/packages/lf20_HX0isy.json"),
            ),
          ),
        ),
      ),
    );
  }
}

• The Lottie.network()'s reverse property is used to reverse the motion in the animation.

• The Lottie.network()'s repeat property is used to keep repeating the animation.

You can see Lottie animation by Andrea Del Latte here.

Happy cooking with Flutter :)

Follow me on Medium & twitter!