simple_animations 2.3.0-beta.4
simple_animations: ^2.3.0-beta.4 copied to clipboard

Powerful framework to create beautiful custom animations in no time.

๐ŸŽฌ Simple Animations โท #

Awesome Flutter Pub

Simple Animations is a powerful framework to create beautiful custom animations in no time.

  • ๐Ÿ’ช fully tested
  • ๐Ÿ“ well documented
  • ๐Ÿ’ผ enterprise-ready

๐ŸŒž Highlights #

  • Easily create custom animations in stateless widgets
  • Animate multiple properties at once
  • Create staggered animations within seconds
  • Simplified working with AnimationController instances
  • Designed with type-safety in mind

โ›๏ธ Getting started #

Add Simple Animations to your project by following the instructions on the install page and start using it:

import 'package:simple_animations/simple_animations.dart';

๐Ÿ›ˆ If are upgrading from version 1.x.x read the migration guide.

๐Ÿฑ Modules #

Simple Animations constists of multiple modules that are provided by this Flutter package. You can also use them separately.

Overview #

๐Ÿš€ย Statelessย AnimationWidgets for super simple creating custom animations.
๐ŸŽญย MultiTweenAnimate multiple properties at once or create staggered animations.
๐Ÿนย LiquidBeautiful visual animations that increases the visual quality of your app.
๐ŸŽฅย AnicotoSetup managed AnimationControllers instantly.

Click on a module name to read it's documentation and to see examples.

๐Ÿ›ˆ Note: These examples uses supercharged for syntactic sugar.

๐Ÿš€ Stateless Animation #

Stateless Animation provides your app with a powerful set of Flutter widgets that hide the most complex part of creating animations.

Example: Square with a animated, fading background color.

PlayAnimation<Color>( // <-- specify type of animated variable
  tween:, // <-- define tween of colors
  builder: (context, child, value) { // <-- builder function
    return Container(
        color: value, // <-- use animated value
        width: 100, 
        height: 100

Read more about it or watch examples.

๐ŸŽญ MultiTween #

MultiTween gives is mighty tool thats enables you to tween multiple properties in a single Animatable or designing staggered animations.

Example: Custom tween with multiple properties.

enum AniProps { width, height, color } // <-- define properties

class MyWidget extends StatelessWidget {

  final _tween = MultiTween<AniProps>() // <-- design tween
    ..add(AniProps.width, 0.0.tweenTo(400.0), 1000.milliseconds)
    ..add(AniProps.width, 400.0.tweenTo(300.0), 1000.milliseconds)
    ..add(AniProps.height, 500.0.tweenTo(200.0), 2000.milliseconds)
    ..add(AniProps.color,, 2.seconds);

  Widget build(BuildContext context) {
    return ... // <-- use tween

Read more about it or watch examples.

๐Ÿน Liquid #

Liquid provides ready-to-use, stunning visual animations that can be explored and configured with Liquid Studio.


Read more about it or watch examples.

๐ŸŽฅ Anicoto #

Anicoto fully manages your AnimationController instances and handles initialization, configuration and disposing. No more boilerplate code.

Example: Animated stateful widget with full-fledged AnimationController instance.

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {  // <-- add AnimationMixin to state class

  Animation<double> size; // <-- declare animation variable

  void initState() {
    size = 0.0.tweenTo(200.0).animatedBy(controller); // <-- connect tween and controller and apply to animation variable; // <-- start the animation playback

  Widget build(BuildContext context) {
    return Container(
      width: size.value, // <-- use animation variable's value here 
      height: size.value, // <-- use animation variable's value here

Read more about it or watch examples.

๐Ÿ“ˆ Improve #

Simple Animations will improve in future updates. Help me by reporting bugs, submit new ideas for features or anything else that you want to share.

  • Just write an issue on GitHub. โœ๏ธ
  • And don't forget to hit the like button for this package โœŒ๏ธ