Lottie in Flutter

The lottie package on pub.dev is a Lottie player written in Dart, so there is no separate iOS or Android setup.

Install

flutter pub add lottie

Checked on 7 October 2026: lottie 3.6.1 on pub.dev. It needs Dart 3.11 and Flutter 3.41 or newer. Then list the file in pubspec.yaml:

flutter:
  assets:
    - assets/icon-check.json

A working example

This plays the Check animated icon from the free library. Download its Lottie JSON file, then:

1. Put icon-check.json in assets/ and list it under flutter: assets: in pubspec.yaml.

2. Use the widget.

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

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

  @override
  Widget build(BuildContext context) {
    // A still frame for Remove animations (Android) and Reduce Motion (iOS), read when it builds.
    final still = MediaQuery.disableAnimationsOf(context) ||
        View.of(context).platformDispatcher.accessibilityFeatures.reduceMotion;
    return Semantics(
      label: 'Check',
      image: true,
      child: Lottie.asset(
        'assets/icon-check.json',
        controller: still ? const AlwaysStoppedAnimation(0.233) : null,
        repeat: true,
        width: 48,
        height: 48,
      ),
    );
  }
}

Flutter reports the two motion settings separately. MediaQuery.disableAnimationsOf follows Android's Remove animations setting. On iOS, Reduce Motion shows up in accessibilityFeatures.reduceMotion instead, so the example checks both. When either is on, AlwaysStoppedAnimation holds a frame 23% of the way in, where the animation is complete.

The settings are read when the widget builds. A change to Android's setting rebuilds it, because MediaQuery tells the widget. A change to iOS Reduce Motion while the app is open shows the next time the widget builds. To follow it at once, use a StatefulWidget that listens for didChangeAccessibilityFeatures.

Semantics names the animation for screen readers. A decorative one is wrapped in ExcludeSemantics instead.

Every animation in the library has this code on its page with its own file name filled in.

Common problems

Unable to load asset

The file has to be listed under flutter: assets: in pubspec.yaml, with the same path you pass to Lottie.asset. After editing pubspec.yaml, stop the app and run it again.

A .lottie file won't load

Lottie.asset reads JSON. To play a .lottie file you pass a decoder that picks the JSON out of the archive, and the package README shows one. The JSON download is simpler.

It loops when it shouldn't

repeat is true unless you set it to false. It only matters while animate is true.

You want to drive playback yourself

Pass an AnimationController as controller. Lottie then ignores animate and repeat.

Free downloads

The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.

Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.

The same code for other platforms: HTML, React, React Native, SwiftUI, Android Compose, Webflow, Framer, WordPress.