Lottie Animation In Flutter

Mobile Apps Academy
3 min readFeb 19, 2024

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

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

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

Social Handles

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

Twitter : https://twitter.com/MobileAppsAcdmy

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

--

--

Mobile Apps Academy

Welcome to Mobile Apps Academy, your go-to channel for all things mobile app development!