Lottie for Flutter

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

This repository is an unofficial conversion of the Lottie-android library in pure Dart.

It works on Android, iOS, macOS, linux, windows and web.

Usage

Simple animation

This example shows how to display a Lottie animation in the simplest way.
The Lottie widget will load the json file and run the animation indefinitely.

import 'package:lottie/lottie.dart';
import 'package:material_ui/material_ui.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            // 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'),
          ],
        ),
      ),
    );
  }
}

Specify a custom AnimationController

This example shows how to take full control over the animation by providing your own AnimationController.

With a custom AnimationController you have a rich API to play the animation in various ways: start and stop the animation when you want, play forward or backward, loop between specifics points...

import 'package:lottie/lottie.dart';
import 'package:material_ui/material_ui.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            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();
              },
            ),
          ],
        ),
      ),
    );
  }
}

See this file for a more comprehensive example.

Control the size of the Widget

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/LottieLogo1.json',
  width: 200,
  height: 200,
  fit: BoxFit.fill,
)

width and height are optionals and fallback on the size imposed by the parent or on the intrinsic size of the lottie animation.

Custom loading

The Lottie widget has several convenient constructors (Lottie.asset, Lottie.network, Lottie.memory) to load, parse and cache automatically the json file.

Sometime you may prefer to have full control over the loading of the file. Use AssetLottie (or NetworkLottie, MemoryLottie) to load a lottie composition from a json file.

This example shows how to load and parse a Lottie composition from a json file.

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late final Future<LottieComposition> _composition;

  @override
  void initState() {
    super.initState();

    _composition = AssetLottie('assets/LottieLogo1.json').load();
  }

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

Custom drawing

This example goes low level and shows you how to draw a LottieComposition on a custom Canvas at a specific frame in a specific position and size.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗