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

Libraries

animation_definition
animation_preferences
animator
animator_play_states
animator_widget
bounce
bounce_in
bounce_in_down
bounce_in_left
bounce_in_right
bounce_in_up
bounce_out
bounce_out_down
bounce_out_left
bounce_out_right
bounce_out_up
cross_fade_a_b
fade_in
fade_in_down
fade_in_down_big
fade_in_left
fade_in_left_big
fade_in_right
fade_in_right_big
fade_in_up
fade_in_up_big
fade_out
fade_out_down
fade_out_down_big
fade_out_left
fade_out_left_big
fade_out_right
fade_out_right_big
fade_out_up
fade_out_up_big
flash
flip
flip_in_x
flip_in_y
flip_out_x
flip_out_y
flutter_animator
head_shake
heart_beat
hinge
in_out_animation
jack_in_the_box
jello
light_speed_in
light_speed_out
math
pair
perspective
pulse
roll_in
roll_out
rotate_in
rotate_in_down_left
rotate_in_down_right
rotate_in_up_left
rotate_in_up_right
rotate_out
rotate_out_down_left
rotate_out_down_right
rotate_out_up_left
rotate_out_up_right
rubber_band
shake
slide_in_down
slide_in_left
slide_in_right
slide_in_up
slide_out_down
slide_out_left
slide_out_right
slide_out_up
slit_in_diagonal
slit_in_horizontal
slit_in_vertical
slit_out_diagonal
slit_out_horizontal
slit_out_vertical
string_case_formatter
swing
tada
tween_list
tween_percentage
wobble
zoom_in
zoom_in_down
zoom_in_left
zoom_in_right
zoom_in_up
zoom_out
zoom_out_down
zoom_out_left
zoom_out_right
zoom_out_up