Lottie Animation In Flutter

In this article, We will explore how to implement an Animated Onboarding UI View in SwiftUI

Before proceeding, please consider subscribing to our YOUTUBE CHANNEL

Mobile Apps Academy

It gives us a lot of motivation to produce high-quality content for you guys.

if you are interested in watching the video tutorial, Check out below.

Let's start by adding the lottie package to our project. Run the below command.

flutter pub add lottie

Once the package is added, Move the downloaded animation JSON file to

assets → animation → anim_file.json

Once the file is in place, Add this to the pubspec.yaml file like below

and run flutter pub get to get the all dependencies.

flutter pub get

We’ll use lottie a widget to create the animation like below.

Lottie.asset(
   'assets/animations/bottle_anim.json',   /// Pass the path of json animation file
    fit: BoxFit.contain,
    width: 400,
    height: 400,
    repeat: true,
),

Below is the full code.

import 'dart:async';

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


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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {

  @override
  void initState() {
    super.initState();
    Timer(
      const Duration(seconds: 5),
        () => Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const HomePage()))
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Lottie.asset(
                'assets/animations/bottle_anim.json',   /// Pass the path of json animation file
                fit: BoxFit.contain,
                width: 400,
                height: 400,
                repeat: true,
              ),
            )
          ],
        ),
      ),
    );
  }
}

That’s it, You should be able to see the animation

GitHub - Mobile-Apps-Academy/LottieDemoFlutter

Once again Thanks for stopping by.
Do check out our YOUTUBE CHANNEL

Mobile Apps Academy

Social Handles

Instagram : https://www.instagram.com/mobileappsacademy/

Twitter : https://twitter.com/MobileAppsAcdmy

LinkedIn : https://www.linkedin.com/company/mobile-apps-academy/