Lottie Animation

Introduction of Lottie Animation

The Lottie animation package in Flutter is used to display animations created using Lottie, an animation file format for rendering vector animations. Lottie animations are lightweight, can be easily customized, and add dynamic and visually appealing elements to your Flutter applications. These animations can be created and exported from Adobe After Effects using the Boyloving plugin and can be used across various platforms with the Lottie libraries.

Key Features:

• Vector Animations: Render high-quality, scalable vector animations.
• Customizable: Easily change animation properties like colors, speed, and looping.
• Interactive: Control animations programmatically for more interactive user experiences.

Installation: To use the lottie package, add it to your pubspec.yaml file:

dependencies:
  lottie: ^2.0.0  # Use the latest version

Run flutter pub get to install the package.

Importing the Package:

import 'package:lottie/lottie.dart';

Properties of Lottie.asset and Lottie.network:

assetName/url: The file path for the local asset or the URL for the remote asset.

Lottie.asset('assets/animation.json'),
Lottie.network('https://example.com/animation.json'),

repeat: Determines whether the animation should loop indefinitely.

repeat: true,

reverse: If true, the animation will play in reverse.

reverse: true,

animate: Controls whether the animation should play automatically.

animate: true,

controller: An optional AnimationController to control the animation.

controller: animationController,

onLoaded: A callback that is triggered when the Lottie animation is fully loaded. It provides LottieComposition which contains information about the animation.

onLoaded: (LottieComposition composition) {
  // Handle animation load
},

width / height: The width and height of the animation widget.

width: 200,
height: 200,

fit: How the animation should be inscribed into the available space.

fit: BoxFit.cover,

alignment: How to align the animation within its bounds.

alignment: Alignment.topCenter,

Usage:

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

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

class MyApp extends StatelessWidget {
  final AnimationController _controller = AnimationController(vsync: this);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lottie Example'),
        ),
        body: Center(
          child: Lottie.asset(
            'assets/animation.json',
            repeat: true,
            reverse: true,
            animate: true,
            width: 200,
            height: 200,
            fit: BoxFit.cover,
            alignment: Alignment.center,
            controller: _controller,
            onLoaded: (LottieComposition composition) {
              _controller.duration = composition.duration;
              _controller.forward();
            },
          ),
        ),
      ),
    );
  }
}

Final Code: This is the final code with the combination of some above Flutter Lottie Animation package properties.

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

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

  @override
  // ignore: library_private_types_in_public_api
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lottie Example'),
        ),
        body: Center(
          child: Lottie.asset(
            'lib/img/animation.json',
            repeat: true,
            reverse: true,
            animate: true,
            width: 200,
            height: 200,
            fit: BoxFit.cover,
            alignment: Alignment.center,
            controller: _controller,
            onLoaded: (LottieComposition composition) {
              _controller.duration = composition.duration;
              _controller.forward();
            },
          ),
        ),
      ),
    );
  }
}

In this example, the Lottie.asset widget is used to load and display a Lottie animation from a local asset file. The properties repeat, reverse, animate, width, height, fit, and alignment are set to customize the animation’s behavior and appearance. The controller is used to programmatically control the animation, and the onLoaded callback is used to handle the animation once it is fully loaded. Adjust these properties to fit your specific needs and create dynamic, interactive animations in your Flutter applications.

Thank for visiting Hybrid App Development
Posted by Hussam HM