Lottie Animation - Flutter

Although they can greatly enhance an application's user interface, animations can be difficult to integrate into applications. The Lottie animation enters the picture at this point. Lottie is an animation file that uses JSON. it can be used both as a static and network load animation.

In this article, we will log into the implementation of Lottie animation in Flutter Applications.

There are three types of animations

Animate: This property controls the motion of the animation.
Reverse: This property is used to set reverse animation
Repeat: This property is used to set repeat animations multiple times.

Syntax

 Lottie.network(
   'path of JSON file',
   repeat: true,
   reverse: true,
   animate: true,
 )

Video example of Lottie widget mentioned below

Let’s build a simple flutter application of Lottie animation. To do so follow the below steps.

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

import 'package:flutter/material.dart';

void main() {

runApp(RunMyApp());

}

Step 3: Adding dependency in project

 dependencies:
   flutter:
     sdk: flutter
    lottie:

Step 4: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

class RunMyApp extends StatelessWidget {

const RunMyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(home);

}

Step 5: Final code of lottie widget.

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

 void main() {
   runApp(Lottiedata());
 }

 class Lottiedata extends StatefulWidget {
   @override
   _LottiePageState createState() => _LottiePageState();
 }

 class _LottiePageState extends State<Lottiedata> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
        title: Text("Candidroot Solutions"),
        backgroundColor: Colors.blue,
        automaticallyImplyLeading: false,
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.network(
              'https://assets1.lottiefiles.com/private_files/lf30_yQtj4O.json',
              repeat: true,
              reverse: true,
              animate: true,
             ),
           ],
         ),
       ),
     );
   }
 }

Step 5: Output of above example.

Happy coding!

in Mobile

365Bloggy June 20, 2024

Lottie Animation - Flutter

Let’s build a simple flutter application of Lottie animation. To do so follow the below steps.

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 3: Adding dependency in project

Step 4: Creating a stateless widget

Step 5: Final code of lottie widget.

Step 5: Output of above example.

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us