How to Use Lottie Animation in Flutter: Simple Guide

To use lottie animations in Flutter, add the lottie package to your pubspec.yaml, then use Lottie.asset() or Lottie.network() widget to display animations. This widget loads and plays JSON animation files created with Adobe After Effects and exported via Bodymovin.

Syntax

The main widget to display Lottie animations is Lottie.asset() for local files or Lottie.network() for online JSON animation files.

• Lottie.asset('path/to/animation.json'): Loads animation from app assets.
• Lottie.network('https://url/to/animation.json'): Loads animation from a web URL.
• You can control animation with optional parameters like repeat, reverse, and animate.

dart

Lottie.asset('assets/animation.json', repeat: true, animate: true)

Output

Displays the Lottie animation from local assets, looping continuously.

Example

This example shows a Flutter app that loads a Lottie animation from assets and plays it in a loop.

dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Lottie Animation Example')),
        body: Center(
          child: Lottie.asset('assets/animation.json', repeat: true),
        ),
      ),
    );
  }
}

Output

A screen with an app bar titled 'Lottie Animation Example' and a centered looping animation from the local JSON file.

Common Pitfalls

• Forgetting to add the animation JSON file to pubspec.yaml under assets causes loading errors.
• Using a wrong path or URL will fail silently or show a blank widget.
• Not adding the lottie package dependency in pubspec.yaml will cause build errors.
• Animations may not play if animate is set to false or if the widget is not mounted properly.

dart

/// Wrong: Missing asset in pubspec.yaml
Lottie.asset('assets/missing.json')

/// Right: Add asset in pubspec.yaml
/// assets:
///   - assets/animation.json
Lottie.asset('assets/animation.json')

Quick Reference

Summary tips for using Lottie in Flutter:

• Add lottie: ^2.2.0 (latest) to pubspec.yaml dependencies.
• Place animation JSON files in your assets folder and declare them in pubspec.yaml.
• Use Lottie.asset() for local files or Lottie.network() for online animations.
• Control playback with parameters like repeat, reverse, and animate.
• Test animations on real devices or emulators for smooth performance.

Key Takeaways

Add the lottie package and declare animation files in pubspec.yaml to use Lottie in Flutter.

Use Lottie.asset() for local JSON animations and Lottie.network() for online animations.

Always verify asset paths and package dependencies to avoid loading errors.

Control animation playback with parameters like repeat and animate for desired behavior.