Draw Lottie files on a Flutter Widget. lottie 1.2.2

Render After Effects animations natively on Flutter..

Getting Started

  • Download this package as a library

    • Depend on it Run this command:

      $ flutter pub add lottie
    • This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

         lottie: ^1.2.2
    • Import it Now in your Dart code, you can use:

      import 'package:lottie/lottie.dart';
  • How to Use this Packege

    • Basic usage (to display a Lottie animation in the simplest way):

          // Load a Lottie file from your assets
              child: Lottie.asset('assets/lottieJson/delivery.json'),
          // Load an animation and its images from a zip file
              child: Lottie.asset('assets/lottieZip/mfood.zip'),
          // Load a Lottie file from a remote url
              child: Container(
              width: MediaQuery.of(context).size.width,
              child: LottieBuilder.network(
    • The Lottie widget takes the same arguments and have the same behavior as the Image widget in term of controlling its size:

            width: 200,
            height: 200,
            fit: BoxFit.fill,
  • Preview


View Github