Lottie for Flutter

Telegram Stickers (.tgs)

To load .tgs files, use the LottieComposition.decodeGZip decoder.

DotLottie (.lottie)

To load .lottie archives, provide a custom decoder that uses LottieComposition.decodeZip and a filePicker to select the correct .json file within the archive.

The Lottie widget provides several convenient constructors to load, parse, and cache JSON files automatically. By default, the animation runs indefinitely.

// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json'),

// Load a Lottie file from a remote url
Lottie.network(
  'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
),

// Load an animation and its images from a zip file
Lottie.asset('assets/lottiefiles/angel.zip'),

To change the launch screen image for the iOS version of your Flutter app, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode to manage the assets.

Using Xcode:

1. Open the iOS project in Xcode by running open ios/Runner.xcworkspace from your terminal.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog.

You can display Lottie animations in your Flutter application using the Lottie.asset constructor to load files from your local assets, or the Lottie.network constructor to load animations from a remote URL. Ensure you have imported package:lottie/lottie.dart.

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

// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json'),

// Load a Lottie file from a remote url
Lottie.network(
  'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/sample_app/assets/Mobilo/A.json',
),

To gain full control over playback (start, stop, play forward/backward, or loop between specific points), provide your own AnimationController to the Lottie widget. You must use the onLoaded callback to sync the controller's duration with the Lottie composition's duration.

_controller = AnimationController(vsync: this);

// ...

Lottie.asset(
  'assets/LottieLogo1.json',
  controller: _controller,
  onLoaded: (composition) {
    // Configure the AnimationController with the duration of the
    // Lottie file and start the animation.
    _controller
      ..duration = composition.duration
      ..forward();
  },
),

For low-level rendering, you can draw a LottieComposition on a Canvas using LottieDrawable. This allows you to render specific frames at specific positions and sizes within a CustomPainter.

class _Painter extends CustomPainter {
  final LottieDrawable drawable;

  _Painter(LottieComposition composition)
    : drawable = LottieDrawable(composition);

  @override
  void paint(Canvas canvas, Size size) {
    var frameCount = 40;
    var columns = 10;
    for (var i = 0; i < frameCount; i++) {
      var destRect = Offset(i % columns * 50.0, i ~/ 10 * 80.0) & (size / 5);
      drawable
        ..setProgress(i / frameCount)
        ..draw(canvas, destRect);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

When running on Flutter Web, it is recommended to use the canvaskit renderer for better compatibility and performance:

flutter run -d chrome --web-renderer canvaskit

To explore the various implementation patterns and examples provided in this repository, you can import the examples library. This is useful for understanding how to implement simple animations, custom controllers, and advanced features like Telegram Stickers or DotLottie files.

import 'lib/examples/examples.dart';

By default, animations play at the frame rate exported by After Effects. You can override this using the frameRate parameter:

• FrameRate.max: Uses the device frame rate (up to 120FPS).
• FrameRate.composition: Uses the exported frame rate (default).
• FrameRate(n): Uses a specific frame rate.

Lottie.asset('anim.json',
  // Use the device frame rate (up to 120FPS)
  frameRate: FrameRate.max,
  // Use the exported frame rate (default)
  frameRate: FrameRate.composition,
  // Specific frame rate
  frameRate: FrameRate(10),
)

If you need full control over the loading process, use specialized classes to load a LottieComposition from a JSON file. This is useful when using a FutureBuilder to handle loading states.

// Example using AssetLottie to load a composition manually
late final Future<LottieComposition> _composition;

@override
void initState() {
  super.initState();
  _composition = AssetLottie('assets/LottieLogo1.json').load();
}

// In build method:
FutureBuilder<LottieComposition>(
  future: _composition,
  builder: (context, snapshot) {
    var composition = snapshot.data;
    if (composition != null) {
      return Lottie(composition: composition);
    } else {
      return const Center(child: CircularProgressIndicator());
    }
  },
)

The Lottie widget behaves like the Image widget regarding sizing. You can specify width, height, and fit (using BoxFit). If these are omitted, the widget falls back to the size imposed by the parent or the intrinsic size of the animation.

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