flutter_animator 2.0.9

  • Readme
  • Changelog
  • Example
  • Installing
  • 91

animator #

Enables you to create stunning flutter animations, faster, efficient and with less code.

Partly inspired by the amazing Animate.css package by Dan Eden. Please note, although it's inspired by Animate.css, this still is a Flutter package, meaning it will be available for all flutter-supported platforms.

Features:

  • Combine and chain Tweens with multiple easing-curves.
  • Less boilerplate code by using a widget which directly handles the controller, animations etc.
  • Automatically (re)starts animations on hot-reload after saving.
  • Animate your project with ease using the Animate.css based Widgets.

Please press the like button if you like this package, or star it on github.

Getting Started #

Note: To see all of the animated widgets in action be sure to run the app in the demo_app package, or view them on the Animate.css page.

Put the dependency inside your pubspec.yml and run packages get.

Using one of the Animate.css style widgets:

import 'package:flutter/widgets.dart';
import 'package:flutter_animator/flutter_animator.dart';

class TestAnimatedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RubberBand(
      child: Text(
        'Rubber',
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

Using a GlobalKey to enable play/stop/reverse animations from code:

import 'package:flutter/widgets.dart';
import 'package:flutter_animator/flutter_animator.dart';

class TestAnimatedWidget extends StatefulWidget {
  @override
  _TestAnimatedWidgetState createState() => _TestAnimatedWidgetState();
}
class _TestAnimatedWidgetState extends State<TestAnimatedWidget> {
  //Register a key in your state:
  GlobalKey<AnimatorWidgetState> _key = GlobalKey<AnimatorWidgetState>();
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
            //Render the widget using the _key
            child: RubberBand(
              key: _key,
              child: Text(
                'Rubber',
                style: TextStyle(fontSize: 60),
              ),
            ),
        ),
        Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 10, 30),
            child: IconButton(
              icon: Icon(
                Icons.play_arrow,
                color: Colors.green,
              ),
              //Use _key.currentState to forward/stop/reverse
              onPressed: () => _key.currentState.forward(),
            ),
        ),
      ],
    );
  }
}

Create your own:

Below is the code (with extra comments) from the actual FadeInDown animated widget. It should give you a clear insight on how to animate with the Animator using the AnimatorWidget.

import 'package:flutter/widgets.dart';

import '../../flutter_animator.dart';

///Firstly, we create an _AnimationDefinition_.
///This is the actual animation part, which gets driven by the _AnimatorWidget_.
class FadeInDownAnimation extends AnimationDefinition {
  FadeInDownAnimation({
  ///[AnimationPreferences] allows us to use the animation with different parameters for:
  ///offset, duration, autoPlay and an animationStatusListener.
    AnimationPreferences preferences = const AnimationPreferences(),
  }) : super(
          preferences: preferences,
          ///If you want to use the size of the widget, you need to define it here. (needsScreenSize is also available)
          needsWidgetSize: true,
          ///The opacity to use on the first render when using screenSize or widgetSize.
          ///In some cases 'flickering' may appear when this isn't set to 1.0 or 0.0 respectively.
          preRenderOpacity: 0.0,
        );

  ///Use the build function to actually render the animated values.
  ///Performance-wise it's better to use a FadeTransition for opacity animation.
  ///Use AnimatedBuilder to update te animation and it's values.
  @override
  Widget build(BuildContext context, Animator animator, Widget child) {
    return FadeTransition(
      ///Use animator.get([KEY]) to get to the Animation object.
      opacity: animator.get("opacity"),
      child: AnimatedBuilder(
        ///[Animator] exposes the AnimationController via animator.controller.
        animation: animator.controller,
        child: child,
        builder: (BuildContext context, Widget child) => Transform.translate(
          child: child,
          ///Use animator.get([KEY]).value to get the animated value.
          offset: Offset(0.0, animator.get("translateY").value),
        ),
      ),
    );
  }

  ///Inside the getDefinition method we return the actual animation.
  @override
  Map<String, TweenList> getDefinition({Size screenSize, Size widgetSize}) {
    return {
      ///Define a [KEY] and a list of Animated values from 0 to 100 percent.
      ///Please not that you can also define an animation curve inside the [TweenPercentage] class:
      ///TweenPercentage(percent: 0, value: 0.0, curve: Curves.ease),
      "opacity": TweenList<double>(
        [
          TweenPercentage(percent: 0, value: 0.0),
          TweenPercentage(percent: 100, value: 1.0),
        ],
      ),
      "translateY": TweenList<double>(
        [
          TweenPercentage(percent: 0, value: -widgetSize.height),
          TweenPercentage(percent: 100, value: 0.0),
        ],
      ),
    };
  }
}

///To use the AnimationDefinition we just created we could do the following:
///For a single animation:
/// AnimatorWidget(child: [child], definition: FadeInDownAnimation());
/// 
///For In & Out Animations:
///  InOutAnimation(child: [child), inDefinition: FadeInDownAnimation(), outDefinition: ...);
/// 

Available default animations: #

Attention Seekers #

Attention Seekers

  • Bounce
  • Flash
  • HeadShake
  • HeartBeat
  • Jello
  • Pulse
  • RubberBand
  • Shake
  • Swing
  • Tada
  • Wobble

Bouncing Entrances #

Bouncing Entrances

  • BounceIn
  • BounceInDown
  • BounceInLeft
  • BounceInRight
  • BounceInUp

Bouncing Exits #

Bouncing Exits

  • BounceOut
  • BounceOutDown
  • BounceOutLeft
  • BounceOutRight
  • BounceOutUp

Fading Entrances #

Fading Entrances

  • FadeIn
  • FadeInDown
  • FadeInDownBig
  • FadeInLeft
  • FadeInLeftBig
  • FadeInRight
  • FadeInRightBig
  • FadeInUp
  • FadeInUpBig

Fading Exits #

Fading Exits

  • FadeOut
  • FadeOutDown
  • FadeOutDownBig
  • FadeOutLeft
  • FadeOutLeftBig
  • FadeOutRight
  • FadeOutRightBig
  • FadeOutUp
  • FadeOutUpBig

Flippers #

Flippers

  • Flip
  • FlipInX
  • FlipInY
  • FlipOutX
  • FlipOutY

Lightspeed #

Lightspeed

  • LightSpeedIn
  • LightSpeedOut

Rotating Entrances #

Rotating Entrances

  • RotateIn
  • RotateInDownLeft
  • RotateInDownRight
  • RotateInUpLeft
  • RotateInUpRight

Rotating Exits #

Rotating Exits

  • RotateOut
  • RotateOutDownLeft
  • RotateOutDownRight
  • RotateOutUpLeft
  • RotateOutUpRight

Sliding Entrances #

Sliding Entrances

  • SlideInDown
  • SlideInLeft
  • SlideInRight
  • SlideInUp

Sliding Exits #

Sliding Exits

  • SlideOutDown
  • SlideOutLeft
  • SlideOutRight
  • SlideOutUp

Slit Entrances #

Sliding Entrances

  • SlitInDiagonal
  • SlitInHorizontal
  • SlitInVertical

Slit Exits #

Sliding Exits

  • SlitOutDiagonal
  • SlitOutHorizontal
  • SlitOutVertical

Specials #

Specials

  • CrossFadeAB (*not in preview)
  • Hinge
  • JackInTheBox
  • RollIn
  • RollOut

Zooming Entrances #

Zooming Entrances

  • ZoomIn
  • ZoomInDown
  • ZoomInLeft
  • ZoomInRight
  • ZoomInUp

Zooming Exits #

Zooming Exits

  • ZoomOut
  • ZoomOutDown
  • ZoomOutLeft
  • ZoomOutRight
  • ZoomOutUp

[0.0.1] - 2020/02/28 #

  • Added Animator, TweenList, TweenPercentage and Mixins.
  • Added Widgets for every Animate.css variant.

[1.0.0] - 2020/02/29 #

  • Minor adjustments as suggested by Pub.dev

[1.0.01] - 2020/03/03 #

  • Added alignment property to FlipInX to control the origin of the transform
  • Added from property to FlipInX to rotate from visual front or back.

[1.0.02] - 2020/03/03 #

  • Adjusted widgets that use screenSize or widget size to first render with opacity 0.0.

[1.0.03] - 2020/03/03 #

  • Further adjusted widgets that use screenSize or widget size to first render with opacity 0.0.

[1.0.04] - 2020/03/03 #

  • Further adjusted widgets that use screenSize or widget size. Exit-animations now first render with opacity 1.0, entry-animations with 0.0.

[1.1.01] - 2020/03/04 #

  • Created AnimatorWidget and AnimatorWidgetState, further reducing code by lots.
  • Added keys and control functions to animated widgets to enable starting/reversing/stopping animations from code.
  • Refactored some values to AnimatorPreferences.

[1.1.02] - 2020/03/04 #

  • Applied dart pub suggestions on code formatting.

[1.1.03] - 2020/03/05 #

  • Added autoPlay feature to AnimatorPreferences and implemented it in AnimatorWidget.
  • Added loop method to AnimatorWidget with an optional yoYo boolean parameter.

[2.0.0] - 2020/03/05 #

  • Complete rebuild of packages to further reduce code needed per animation.
  • Added AnimationDefinitions.
  • Added AnimationPlayState to control play states.

[2.0.1] - 2020/03/08 #

  • Minor documentation Update

[2.0.2] - 2020/03/09 #

  • Added CrossFadeAB to support cross-fading between 2 child widgets

[2.0.3] - 2020/03/09 #

  • Added crossToA and crossToB to CrossFadeAB.

[2.0.4] - 2020/03/09 #

  • Added slit_entrances and slit_exits.

[2.0.5] - 2020/03/11 #

  • Added documentation to classes in order to improve code later on.

[2.0.6] - 2020/03/12 #

  • Added support for Color animations
  • Minor fix for integer animations

[2.0.7] - 2020/04/06 #

  • Fixed issues with reassemble, causing unmounted widgets to mount and animate.

[2.0.8] - 2020/04/11 #

  • Minor fix in readme stating a wrong import. (Special thanks to @atomicsink ;) )

[2.0.9] - 2020/04/24 #

  • Switched to master channel to validate web support.

example/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';

import 'package:flutter_animator/flutter_animator.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<CrossFadeABState> crossFadeAnimation =
      GlobalKey<CrossFadeABState>();

  final GlobalKey<AnimatorWidgetState> basicAnimation =
      GlobalKey<AnimatorWidgetState>();

  final GlobalKey<InOutAnimationState> inOutAnimation =
      GlobalKey<InOutAnimationState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Animator'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(top: 20)),
            CrossFadeAB(
              key: crossFadeAnimation,
              childA: Text('A', style: TextStyle(fontSize: 20)),
              childB: Text('B', style: TextStyle(fontSize: 20)),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
            FlatButton(
              onPressed: () {
                crossFadeAnimation.currentState.cross();
              },
              child: Text(
                'Cross Animate',
                style: TextStyle(fontSize: 20),
              ),
            ),
            BounceIn(
              key: basicAnimation,
              child: Text(
                'BounceIn',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
            FlatButton(
              onPressed: () {
                basicAnimation.currentState.forward();
              },
              child: Text(
                'Animate Bounce',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 40)),
            InOutAnimation(
              key: inOutAnimation,
              child: Text(
                'In & Out',
                style: TextStyle(fontSize: 20),
              ),
              inDefinition: FadeInAnimation(),
              outDefinition: BounceOutDownAnimation(),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
            FlatButton(
              onPressed: () {
                if (inOutAnimation.currentState.status !=
                    InOutAnimationStatus.Out) {
                  inOutAnimation.currentState.animateOut();
                } else {
                  inOutAnimation.currentState.animateIn();
                }
              },
              child: Text(
                'Animate In & Out',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_animator: ^2.0.9

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_animator/flutter_animator.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
82
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
91
Learn more about scoring.

We analyzed this package on May 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
vector_math ^2.0.8 2.0.8
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
Dev dependencies
flutter_test