• 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

      Developers

      • Home
      • Blog
      • Developers
      • Flare Animation With Flutter
      Flutter Flare

      Flare Animation With Flutter

      • Posted by Shivam Srivastava
      • Categories Developers, Flutter
      • Date March 16, 2020
      • Comments 0 comment
      Spread the love

      Introduction

      Flare provides powerful real-time vector style and animation for app and game designers alike. The first goal of Flare is to permit designers to work directly with assets that run in their final product, eliminating the requirement to redo work job in code.

      Purpose of this article?

      In this article, I will create a simple flare animation application using flutter and then run that application on the android emulator and web browser.

      Setup Flutter on your machine

      If you don’t have a flutter set up in your machine so you have to need to install it first. Click here to learn how to set up flutter on Windows and for Linux click here.

      Let’s Begin.

      Lets Begin | Flare Animation With Flutter

      • Add flare_flutter  dependency in your project pubspec.yaml file.
      dependencies:
        flutter:
          sdk: flutter
        flare_flutter: <latest_version>

      flare_flutter : Using this dependency we will add flare animation file in the project.

      Run flutter packages get command on terminal

      • Add the below code in your main.dart file for import dependency.
      import 'package:flare_flutter/flare.dart';
      import 'package:flare_flutter/flare_actor.dart';
      import 'package:flare_flutter/flare_controller.dart';

      • Add Flare animation file in assets folder (user define folder). You can create your own animation or download another online source. Click here for download.

      Addflrfile | Flare Animation With Flutter

      • Do entry of the flare animation file in pubspec.yaml file
        assets:
          - assets/Penguin.flr

      Now we are ready for Coding the component.

      class Homepage extends StatefulWidget {
        Homepage({Key key}) : super(key: key);
      
        @override
        _MyHomePageState createState() => new _MyHomePageState();
      }
      
      class _MyHomePageState extends State<Homepage>
          with SingleTickerProviderStateMixin, FlareController {
        AnimationController controllerProgress;
        Animation<double> animation;
        double _rockAmount = 0.5;
        double _speed = 1.0;
        double _rockTime = 0.0;
        ActorAnimation _rock;
      
        @override
        void initialize(FlutterActorArtboard artboard) {
          _rock = artboard.getAnimation("music_walk");
        }
      
        @override
        bool advance(FlutterActorArtboard artboard, double elapsed) {
          _rockTime += elapsed * _speed;
          _rock.apply(_rockTime % _rock.duration, artboard, _rockAmount);
          return true;
        }
      
        _controlProgrgress() {
          controllerProgress =
              AnimationController(duration: const Duration(seconds: 5), vsync: this);
          animation = Tween(begin: 0.0, end: 1.0).animate(controllerProgress)
            ..addListener(() {
              setState(() {
                _speed = animation.value * 5;
              });
            });
          controllerProgress.repeat();
        }
      
        @override
        void initState() {
          super.initState();
          _controlProgrgress();
        }
      
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Stack(
              //alignment: Alignment.center,
              children: <Widget>[
                Positioned.fill(
                    child: FlareActor(
                  "assets/Penguin.flr",
                  alignment: Alignment.center,
                  fit: BoxFit.cover,
                  animation: "walk",
                  controller: this,
                )),
                Positioned.fill(
                    child: new Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                      LinearProgressIndicator(
                        value: animation.value,
                      ),
                    ])),
              ],
            ),
          );
        }
      
        @override
        void dispose() {
          controllerProgress.dispose();
          super.dispose();
        }
      
        @override
        void setViewTransform(Mat2D viewTransform) {
          // TODO: implement setViewTransform
        }
      }
      


      Done | Flare Animation With Flutter


      Now run this project Android emulator first.

      Penguin | Flare Animation With Flutter

      Finally, our flare project successfully runs on the android emulator now run it on the web browser. For run flutter projects on Web, you have to need to set up your flutter project as run on the web. For learning how to set up just watch our Flutter web Course.

      After done web set up run below command for a run project on the web.

      flutter run -d chrome

      Penguinweb | Flare Animation With Flutter

      Get complete code on GitHub.

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flare animation tutorial, flare flutter tutorial, flutter animation plugin, flutter flare example, how to use flare in flutter

      • Share:
      author avatar
      Shivam Srivastava

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

      Previous post

      DATE TIME PICKER USING FLUTTER
      March 16, 2020

      Next post

      DATE TIME PICKER DIALOG USING FLUTTER
      March 17, 2020

      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