animator

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

Null safety:

For null safety please use flutter_animator: ^3.1.0, without null safety: flutter_animator: 2.1.0

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