Lottie: Animating After Effects Compositions in Flutter

Lottie is a mobile library for Android, iOS, macOS, Linux, Windows, and Web. It allows developers to parse Adobe After Effects animations exported as JSON with Bodymovin and render them natively on mobile devices.

Installation

dependencies:
  lottie: ^3.6.0

Usage

Simple Animation

Load a Lottie animation from an asset:

Lottie.asset('assets/my_animation.json');

Load a Lottie animation from the network:

Lottie.network('https://www.example.com/my_animation.json');

Custom AnimationController

Gain full control over the animation by providing a custom AnimationController:

final controller = AnimationController(vsync: this);

Lottie.asset(
  'assets/my_animation.json',
  controller: controller,
);

controller.forward();
controller.pause();

Custom Size

Control the size of the Lottie widget like an Image widget:

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

Custom Loading

Load and parse a Lottie composition from a JSON file manually:

final composition = await AssetLottie('assets/my_animation.json').load();

Custom Drawing

Draw a LottieComposition on a custom Canvas:

final drawable = LottieDrawable(composition);

CustomPaint(
  painter: CustomPainter(drawable),
);

class CustomPainter extends CustomPainter {
  final LottieDrawable drawable;

  CustomPainter(this.drawable);

  @override
  void paint(Canvas canvas, Size size) {
    // Draw the Lottie composition at a specific frame, position, and size
  }
}

Modify Properties at Runtime

Modify Lottie animation properties at runtime using ValueDelegates:

Lottie.asset(
  'assets/my_animation.json',
  delegates: LottieDelegates(
    text: (initialText) => 'Modified Text: $initialText',
    values: [
      ValueDelegate.color(
        const ['Shape Layer 1', 'Rectangle', 'Fill 1'],
        value: Colors.red,
      ),
      ValueDelegate.opacity(
        const ['Shape Layer 1', 'Rectangle'],
        callback: (frameInfo) => (frameInfo.overallProgress * 100).round(),
      ),
      ValueDelegate.position(
        const ['Shape Layer 1', 'Rectangle', '**'],
        relative: const Offset(100, 200),
      ),
    ],
  ),
);

Frame Rate

Control the animation's frame rate:

Lottie.asset(
  'anim.json',
  frameRate: FrameRate.max, // Device frame rate (up to 120FPS)
  frameRate: FrameRate.composition, // Exported frame rate (default)
  frameRate: FrameRate(10), // Specific frame rate
);

Telegram Stickers (.tgs) and DotLottie (.lottie)

Load Telegram Stickers (.tgs):

Lottie.network(
  'https://telegram.org/file/464001484/1/bzi7gr7XRGU.10147/815df2ef527132dd23',
  decoder: LottieComposition.decodeGZip,
);

Load DotLottie (.lottie) with a custom decoder:

Future customDecoder(List bytes) {
  return LottieComposition.decodeZip(bytes, filePicker: (files) {
    return files.firstWhereOrNull(
      (f) => f.name.startsWith('animations/') && f.name.endsWith('.json'),
    );
  });
}

Lottie.asset(
  'assets/cat.lottie',
  decoder: customDecoder,
);

Performance Considerations

To reduce CPU/GPU usage, enable the renderCache parameter:

Lottie.asset(
  'assets/my_animation.json',
  renderCache: true,
);

Limitations

Lottie for Flutter supports the same feature set as Lottie Android.

Flutter Web

To run Lottie animations on Flutter Web, use the --web-renderer canvaskit flag:

flutter run -d chrome --web-renderer canvaskit