Adding Lottie Animations to Your Flutter App: A Step-by-Step Guide

Discover how to add beautiful Lottie animations to your Flutter app with this easy-to-follow guide. Whether you're a beginner or an experienced developer, this tutorial will show you how to use Lottie network, asset, and local asset methods to load and display animations in your app. 

Get started today and take your app to the next level with Lottie!

Lottie Flutter package to load and display Lottie animations in your app. The code snippets  will show you three different ways to load Lottie animations:

• Lottie.network(): This method loads a Lottie animation file from a remote URL. In your example, the animation file is located at 'https://assets7.lottiefiles.com/packages/lf20_nDZD95BlQM.json'. The Lottie.network() method takes the URL as its parameter and returns a widget that can be used to display the animation.

• Lottie.asset('assets/anim/developer.zip'): This method loads a Lottie animation file and its images from a local zip file. In your example, the zip file is located at 'assets/anim/developer.zip'. The Lottie.asset() method takes the path to the zip file as its parameter and returns a widget that can be used to display the animation.

• Lottie.asset('assets/anim/developer.json'): This method loads a Lottie animation file from your app's local assets. In your example, the animation file is located at 'assets/anim/developer.json'. The Lottie.asset() method takes the path to the animation file as its parameter and returns a widget that can be used to display the animation.

Note that in order to use any of these methods, you need to have the Lottie Flutter package installed in your app. You can add it to your project by adding the following line to your app's dependencies in your pubspec.yaml file:

dependencies:
  lottie: ^2.2.0

..

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

class LottieRoute extends StatefulWidget {

  const LottieRoute({super.key});

  @override
  LottieRouteState createState() => LottieRouteState();
}


class LottieRouteState extends State<LottieRoute> {

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


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(15),
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[

            const Text("Load a Lottie file from a remote url"),
            // Load a Lottie file from a remote url
            Lottie.network(
                'https://assets7.lottiefiles.com/packages/lf20_nDZD95BlQM.json'),
            const Divider(),


            const Text("Load an animation and its images from a zip file (Size : 20 kb)"),
            // Load an animation and its images from a zip file
            Lottie.asset('assets/anim/developer.zip'),
            const Divider(),


            const Text("Load a Lottie file from your assets (Size : 193 kb)"),
            // Load a Lottie file from your assets
            Lottie.asset('assets/anim/developer.json'),
            const Divider(),


          ],
        ),
      ),
    );
  }


}

You need to config asset file from your yaml file

..

Ref :  https://lottiefiles.com/