• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • Flutter Lottie Animation
      Flutter-Lottie-Animation

      Flutter Lottie Animation

      • Posted by Shivam Srivastava
      • Categories Flutter, Developers
      • Date September 12, 2019
      • Comments 0 comment
      Spread the love

      Why Lottie Library

      Yes, mostly all beginners have the same question that why we use Lottie Animation when flutter provides a lot of animation widgets that more easy to use than Lottie animation.

      Lottie is a widget who provides very cool animation who make the application more attractive, Lottie libraries and plugins available for free Web, iOS, Android, Flutter, React Native, Xamarin, Native Script, Windows, Vue, Angular, QT, Skia, Framer X, Sketch for free. We can easily get the Lottie animation file from https://lottiefiles.com and can use it our application.

      In this article, I’ll show how to use Lottie widget.

      1. Create a simple flutter project

      2. add lottie_flutter in pubspec.yaml

        lottie_flutter: ^0.2.0

      3. Download this Lottie animation and put in <your-project>/assets and mention in pubspec.yaml

        assets:
         - assets/29-motorcycle.json

      4. Import these below

      import 'dart:async';
      import 'dart:convert';
      import 'dart:ui';
      import 'package:lottie_flutter/lottie_flutter.dart';
      import 'package:flutter/material.dart';
      import 'package:flutter/services.dart' show rootBundle;

      5. Main code of page on main.dart

      class LottieDemo extends StatefulWidget {
        const LottieDemo({Key key}) : super(key: key);
      
        @override
        _LottieDemoState createState() => _LottieDemoState();
      }
      
      class _LottieDemoState extends State<LottieDemo>
          with SingleTickerProviderStateMixin {
        LottieComposition _composition;
        AnimationController _controller;
        bool _repeat;
      
        @override
        void initState() {
          super.initState();
      
          _repeat = true;
          _controller = AnimationController(
            duration: const Duration(milliseconds: 1),
            vsync: this,
          );
      
          loadAsset("assets/29-motorcycle.json")
              .then((LottieComposition composition) {
            setState(() {
              _composition = composition;
              _controller.reset();
            });
          });
          _controller.addListener(() => setState(() {}));
        }
      
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Flutter Lottie Animation'),
            ),
            body: Container(
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Lottie(
                    composition: _composition,
                    size: const Size(300.0, 300.0),
                    controller: _controller,
                  ),
                  Slider(
                    value: _controller.value,
                    onChanged: _composition != null
                        ? (double val) => setState(() => _controller.value = val)
                        : null,
                  ),
                  Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
                    IconButton(
                      icon: _controller.isAnimating
                          ? const Icon(Icons.pause)
                          : const Icon(Icons.play_arrow),
                      onPressed: _controller.isCompleted || _composition == null
                          ? null
                          : () {
                              setState(() {
                                if (_controller.isAnimating) {
                                  _controller.stop();
                                } else {
                                  if (_repeat) {
                                    _controller.repeat();
                                  } else {
                                    _controller.forward();
                                  }
                                }
                              });
                            },
                    ),
                    IconButton(
                      icon: const Icon(Icons.stop),
                      onPressed: _controller.isAnimating && _composition != null
                          ? () {
                              _controller.reset();
                            }
                          : null,
                    ),
                  ]),
                ],
              ),
            ),
          );
        }
      
        Future<LottieComposition> loadAsset(String assetName) async {
          return await rootBundle
              .loadString(assetName)
              .then<Map<String, dynamic>>((String data) => json.decode(data))
              .then((Map<String, dynamic> map) => LottieComposition.fromMap(map));
        }
      }

      Output screen

      Gif 190912 123313 | Flutter Lottie Animation

      In same way you can get most used animation and add it in your app

      Get complete code, click here

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter animation, lottie-animation

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Plurals in Dart Example
      September 12, 2019

      Next post

      Android Studio stop support
      September 13, 2019

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now