Render After Effects animations natively on Flutter

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