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):

    dependencies:
       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
        Expanded(
            child: Lottie.asset('assets/lottieJson/delivery.json'),
        ),
        // Load an animation and its images from a zip file
        Expanded(
            child: Lottie.asset('assets/lottieZip/mfood.zip'),
        ),
        // Load a Lottie file from a remote url
        Expanded(
            child: Container(
            width: MediaQuery.of(context).size.width,
            child: LottieBuilder.network(
                'https://assets4.lottiefiles.com/packages/lf20_q5pk6p1k.json'),
            ),
        ),
    

  • The Lottie widget takes the same arguments and have the same behavior as the Image widget in term of controlling its size:

      Lottie.asset(
          'assets/lottieJson/delivery.json',
          width: 200,
          height: 200,
          fit: BoxFit.fill,
      ),
  

• Preview

GitHub

View Github