Flutter Lottie Animations: Add JSON Animations

A Coding Liquids screen recording follows the controller as it adopts the composition duration before playback.

Subscribe on YouTube@codingliquids

Know what a Lottie file contains

Lottie renders vector animation exported as JSON from supported motion-design tooling. It works well for branded illustrations, empty states, and short feedback sequences with modest complexity.

It is a poor replacement for simple opacity or position changes that Flutter can animate natively.

flutter pub add lottie

Bundle JSON and call Lottie.asset

Add lottie to dependencies, declare the JSON under flutter assets, and pass its path to Lottie.asset. Give the widget bounded width and height and include an errorBuilder for a missing or unsupported composition.

Forgetting the asset declaration produces a runtime unable-to-load-asset error.

dependencies:
  flutter:
    sdk: flutter
  lottie: any

Instagram asset notes highlight composition size, constraints, controller ownership, and a static fallback.

Follow me on Instagram@sagnikteaches

Load remote compositions cautiously

Lottie.network accepts an HTTPS URL and can render a downloaded composition. Show a placeholder and handle errorBuilder because availability, latency, and cache policy now affect the animation.

Remote creative changes can alter layout or introduce an unexpectedly large file without an app release.

Import Lottie after declaring its package and JSON asset, then choose asset or network loading explicitly.

import 'package:lottie/lottie.dart';

Synchronise Lottie with AnimationController

Create an AnimationController with vsync and pass it to Lottie.asset. In onLoaded, assign the composition duration and call repeat, forward, or animateTo as the feature requires.

Starting the controller before onLoaded can use the wrong duration and make playback speed surprising.

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

class SuccessAnimation extends StatelessWidget {
  const SuccessAnimation({super.key});
  @override
  Widget build(BuildContext context) => Lottie.asset(
    'assets/animations/success.json',
    width: 220,
    height: 220,
    repeat: false,
    fit: BoxFit.contain,
    errorBuilder: (_, __, ___) => const Icon(Icons.check_circle, size: 96),
  );
}

Play a success tick exactly once

Reset the controller to zero and call forward when the upload state changes from running to successful. Guard against rebuilding success state repeatedly, which would restart the same visual feedback.

A looping confirmation suggests the operation is still active rather than complete.

class UploadSuccess extends StatefulWidget {
  const UploadSuccess({super.key});
  @override
  State<UploadSuccess> createState() => _UploadSuccessState();
}

class _UploadSuccessState extends State<UploadSuccess>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller = AnimationController(vsync: this);

  @override
  Widget build(BuildContext context) => Lottie.asset(
    'assets/animations/success.json',
    controller: controller,
    repeat: false,
    onLoaded: (composition) {
      controller.duration = composition.duration;
      controller.forward(from: 0);
    },
  );

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

A LinkedIn Lottie review covers designer contracts, reduced motion, licensing, and release-device profiling.

Connect on LinkedInSagnik Bhattacharya

Budget file complexity and licensing

Inspect JSON and image asset size, test raster effects on low-end devices, and obtain animation files under a licence suitable for distribution. Prefer a static fallback when accessibility settings disable non-essential motion.

A detailed composition with many masks can cost more than an equivalent Flutter transition.

Lottie.network(
  'https://assets.example.com/animations/empty-state.json',
  width: 240,
  height: 180,
  fit: BoxFit.contain,
  frameRate: FrameRate.composition,
  errorBuilder: (_, __, ___) => const Icon(Icons.inbox_outlined, size: 72),
)

Integrate the composition as an application asset

A Lottie file is executable presentation data with its own canvas size, frame rate, layers, and duration. Review the composition before adding it to the bundle, remove unused artwork, and check its licence and provenance. Large embedded images or complicated vector paths can make a tiny JSON file expensive to rasterise. Give the widget explicit constraints and a fit so the animation does not unexpectedly determine the surrounding layout.

Playback should follow feature state rather than begin from every build. Load the composition, apply its duration to an owned controller when manual control is needed, and start, stop, or reverse in response to meaningful state changes. A loading loop and a one-shot success tick have different lifecycles. If the animation merely decorates a button result, the underlying label and success semantics must remain understandable while the visual is paused or unavailable.

Route changes, backgrounding, and list recycling can leave animations consuming frames off-screen. Pause work when the owning view is inactive, dispose controllers, and avoid giving every repeated list row an always-running composition. Cache reuse helps asset loading but does not make complex rendering free. Profile a release build on a modest device, because a desktop debug run hides frame cost and thermal impact.

Test a missing or malformed asset, delayed composition loading, rapid repeated triggers, reduced motion, and completion after the route has closed. The reduced-motion path can display a representative final frame or a static alternative without delaying the state change. Golden tests are useful for the resting frames; controller tests can pump known progress values and verify completion behaviour. When designers replace the JSON, compare its intrinsic size, duration, and named markers before assuming that existing controller ranges and layout constraints still fit.

Composition delegates or runtime substitutions should be treated as a contract with the designer’s layer names. A renamed layer can silently stop receiving the intended colour or text override, so validate the expected key paths when assets change. Avoid editing arbitrary JSON strings in application code; prepare variations in the source artwork or use supported delegates. If playback represents progress, do not map an uncertain network duration to a fake deterministic completion. Use looping or segmented feedback until the operation resolves, then transition to a genuine success or failure state that remains accessible without the animation.

Asset failures should fall back to a stable icon or illustration with the same meaning. Logging the asset name and parse failure is enough; the raw composition may be large and proprietary.

Animation assets benefit from a release checklist just like code. Verify that every referenced JSON file is present with matching case, can be parsed in a test, fits an agreed size budget, and contains no unexpected embedded bitmap. Capture its duration and intrinsic bounds so a designer update that doubles either value is visible in review. Remote delivery needs a pinned, cacheable URL and a static fallback; an unavailable campaign asset must never remove the button or status it decorates.

Application state should select a segment or resting frame instead of being inferred from controller progress. A download might show a restrained loop while pending, freeze while paused, and play a single completion segment after the repository confirms success. Reopening the route after success should show the completed state without replaying a misleading operation. Theme delegates and localisation substitutions require stable layer names, which should be checked when the source composition changes. On low-power or reduced-motion paths, use the representative still frame and stop all tickers while keeping the same semantic announcement.

Common mistakes

• Know what a Lottie file contains: In Lottie animation, it is a poor replacement for simple opacity or position changes that Flutter can animate natively; inspect this Lottie animation cause before changing another Lottie animation widget.
• Bundle JSON and call Lottie.asset: In Lottie animation, forgetting the asset declaration produces a runtime unable-to-load-asset error; inspect this Lottie animation cause before changing another Lottie animation widget.
• Load remote compositions cautiously: In Lottie animation, remote creative changes can alter layout or introduce an unexpectedly large file without an app release; inspect this Lottie animation cause before changing another Lottie animation widget.
• Synchronise Lottie with AnimationController: In Lottie animation, starting the controller before onLoaded can use the wrong duration and make playback speed surprising; inspect this Lottie animation cause before changing another Lottie animation widget.
• Play a success tick exactly once: In Lottie animation, a looping confirmation suggests the operation is still active rather than complete; inspect this Lottie animation cause before changing another Lottie animation widget.
• Budget file complexity and licensing: In Lottie animation, a detailed composition with many masks can cost more than an equivalent Flutter transition; inspect this Lottie animation cause before changing another Lottie animation widget.

Frequently asked questions

How does know what a Lottie file contains work in Lottie animation?

For Lottie animation, the starting rule is that lottie renders vector animation exported as JSON from supported motion-design tooling. Apply this Lottie animation rule first because know what a Lottie file contains determines whether the Lottie animation pattern fits.

Why does load remote compositions cautiously matter for Lottie animation?

In Lottie animation, show a placeholder and handle errorBuilder because availability, latency, and cache policy now affect the animation. Keeping load remote compositions cautiously at the Lottie animation call site exposes the Lottie animation return value directly.

What failure should I test first in Lottie animation?

First reproduce the Lottie animation case where a looping confirmation suggests the operation is still active rather than complete. The resolved confirmation plays once, exposes the completed state semantically, and stays finished instead of implying continuing work.

How can I verify Lottie animation before release?

Exercise budget file complexity and licensing with real Lottie animation inputs on every shipped platform. Inspect the final Lottie animation callback or output; a successful Lottie animation button tap alone is not proof.

Further reads

Connect Lottie animation to the surrounding Flutter stack through these published tutorials:

• Flutter Development Guide 2026
• Flutter AnimatedContainer: Animate Without Controllers
• Flutter AnimationController and Tween Explained
• Flutter Shimmer Loading Effect Tutorial
• Flutter Animations: The Complete Guide With Code Examples

Sources: Flutter documentation and the package documentation on pub.dev; Lottie animation examples verified against current stable Flutter.