Animations made simple in Flutter using Animator Plugin

By | July 7, 2019
0 Comment

This is a simple demo showing how you can animate views in flutter using very little code.

Watch Video Tutorial

Here is the simple code in which I am showing all basic functions in different different functions. You can call these methods in the build method and execute all.

import 'package:flutter/material.dart';
import 'package:animator/animator.dart';
import 'dart:math';
 
class AnimationDemo extends StatefulWidget {
  AnimationDemo() : super();
 
  final String title = "Flutter Animation";
 
  @override
  AnimationDemoState createState() => AnimationDemoState();
}
 
class AnimationDemoState extends State<AnimationDemo> {
  //
  final logo = FlutterLogo(
    size: 100,
  );
 
  // Animate Opacity
  Widget animateOpacity() {
    return Animator(
      // repeats: 5,
      cycles: 2 * 5, // forward and backward 5 times
      builder: (anim) => Opacity(
            opacity: anim.value,
            child: logo,
          ),
    );
  }
 
  // Animate FadeTransition
  Widget animateFadeIn() {
    return Animator(
      duration: Duration(seconds: 1),
      curve: Curves.elasticOut,
      // repeats: 5,
      cycles: 0, // infinite
      builder: (anim) => FadeTransition(
            opacity: anim,
            child: logo,
          ),
    );
  }
 
  // Transform Scale
  Widget transformScale() {
    return Animator(
      duration: Duration(seconds: 3),
      cycles: 0,
      builder: (anim) => Transform.scale(
            scale: anim.value,
            alignment: Alignment.bottomRight,
            child: logo,
          ),
    );
  }
 
  // Transform Scale
  Widget transformScale2() {
    return Animator(
      tween: Tween<double>(begin: 0.5, end: 1.5),
      duration: Duration(seconds: 2),
      curve: Curves.elasticOut,
      cycles: 0,
      builder: (anim) => Transform.scale(
            scale: anim.value,
            alignment: Alignment.bottomRight,
            child: logo,
          ),
    );
  }
 
  // Size Transition
  Widget sizeTransition1() {
    return Animator(
      duration: Duration(seconds: 3),
      cycles: 0,
      builder: (anim) => SizeTransition(
            sizeFactor: anim,
            child: logo,
          ),
    );
  }
 
  // Size Transition
  Widget sizeTransition2() {
    return Animator(
      duration: Duration(seconds: 3),
      cycles: 0,
      builder: (anim) => SizeTransition(
            axis: Axis.horizontal,
            sizeFactor: anim,
            child: logo,
          ),
    );
  }
 
  // Size Transition
  Widget sizeTransition3() {
    return Animator(
      duration: Duration(seconds: 3),
      cycles: 0,
      builder: (anim) => SizeTransition(
            axis: Axis.horizontal,
            axisAlignment: -1,
            sizeFactor: anim,
            child: logo,
          ),
    );
  }
 
  // Size Transition
  Widget sizeTransition4() {
    return Animator(
      tween: Tween<double>(begin: 0.5, end: 1.5),
      duration: Duration(seconds: 3),
      cycles: 0,
      builder: (anim) => SizeTransition(
            axis: Axis.horizontal,
            axisAlignment: 1,
            sizeFactor: anim,
            child: logo,
          ),
    );
  }
 
  // Rotate Animation
  Widget rotate() {
    return Animator(
      tween: Tween<double>(begin: 0, end: 2 * pi),
      duration: Duration(seconds: 3),
      cycles: 0,
      builder: (anim) => Transform.rotate(
            angle: anim.value,
            child: logo,
          ),
    );
  }
 
  // Rotate Animation
  Widget rotate2() {
    return Animator(
      tween: Tween<double>(begin: 0, end: 2 * pi),
      duration: Duration(seconds: 2),
      cycles: 0,
      curve: Curves.elasticOut,
      builder: (anim) => Transform(
            transform: Matrix4.rotationZ(anim.value),
            alignment: Alignment.center,
            child: logo,
          ),
    );
  }
 
  // Rotate Animation
  Widget rotate3() {
    return Animator(
      tween: Tween<double>(begin: 0, end: 3),
      duration: Duration(seconds: 2),
      repeats: 0,
      builder: (anim) => Transform(
            transform: Matrix4.rotationZ(anim.value),
            alignment: Alignment.center,
            child: logo,
          ),
    );
  }
 
  // Rotate Animation
  Widget rotate4() {
    return Animator(
      tween: Tween<double>(begin: 0, end: 3),
      duration: Duration(seconds: 2),
      repeats: 0,
      builder: (anim) => RotationTransition(
            turns: anim,
            alignment: Alignment.center,
            child: logo,
          ),
    );
  }
 
  // Skew Animation
  Widget skew1() {
    return Animator(
      tween: Tween<double>(begin: 0, end: 3),
      duration: Duration(seconds: 2),
      repeats: 0,
      builder: (anim) => Transform(
            transform: Matrix4.skewX(anim.value),
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.blue,
                ),
              ),
              child: logo,
            ),
          ),
    );
  }
 
  // Skew Animation
  Widget skew2() {
    return Animator(
      tween: Tween<double>(begin: -0.5, end: 0.5),
      duration: Duration(seconds: 2),
      cycles: 0,
      builder: (anim) => Transform(
            transform: Matrix4.skew(anim.value, anim.value),
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.blue,
                ),
              ),
              child: logo,
            ),
          ),
    );
  }
 
  // Skew Animation
  Widget skew3() {
    return Animator(
      tween: Tween<Offset>(begin: Offset(-1, 0), end: Offset(1, 0)),
      duration: Duration(seconds: 2),
      cycles: 0,
      builder: (anim) => FractionalTranslation(
            translation: anim.value,
            child: logo,
          ),
    );
  }
 
  // Scale From Center
  Widget scaleFromCenter() {
    return Animator(
      duration: Duration(seconds: 2),
      cycles: 0,
      builder: (anim) => SizedBox(
            width: anim.value * 50,
            height: anim.value * 50,
            child: logo,
          ),
    );
  }
 
  // Translate Animations
  Widget translate1() {
    return Animator(
      tween: Tween<Offset>(
        begin: Offset(-50, 0),
        end: Offset(50, 0),
      ),
      duration: Duration(seconds: 2),
      cycles: 0,
      builder: (anim) => Transform.translate(
            offset: anim.value,
            child: logo,
          ),
    );
  }
 
  // Translate Animations
  Widget translate2() {
    return Animator(
      tween: Tween<Offset>(
        begin: Offset(-1, 0),
        end: Offset(1, 0),
      ),
      duration: Duration(seconds: 2),
      cycles: 0,
      builder: (anim) => SlideTransition(
            position: anim,
            child: logo,
          ),
    );
  }
 
  // Transform Animations
  Widget transform1() {
    return Animator(
      tween: Tween<Offset>(
        begin: Offset(-50, 0),
        end: Offset(50, 0),
      ),
      duration: Duration(seconds: 2),
      cycles: 0,
      builder: (anim) => Transform(
            transform: Matrix4.translationValues(anim.value.dx, 0, 0),
            child: logo,
          ),
    );
  }
 
  // Transform Animations
  Widget transform2() {
    return Animator(
      duration: Duration(seconds: 2),
      curve: Curves.bounceInOut,
      cycles: 0,
      builder: (anim) => Transform(
            transform: Matrix4.translationValues(anim.value * 100, 0, 0)
              ..rotateZ(anim.value * 4 * pi),
            child: logo,
          ),
    );
  }
 
  // Transform Animations
  Widget transform3() {
    return Animator(
      duration: Duration(seconds: 2),
      cycles: 0,
      builder: (anim) => Transform(
            transform: Matrix4.translationValues(anim.value * 100, 0, 0)
              ..rotateZ(anim.value * 4 * pi),
            child: logo,
          ),
    );
  }
 
  // Transform Animations
  Widget transform4() {
    return Animator(
      duration: Duration(seconds: 2),
      cycles: 0,
      builder: (anim) => Transform(
            transform: Matrix4.translationValues(anim.value * 100, 0, 0)
              ..rotateZ(anim.value * 4 * pi)
              ..scale(anim.value),
            child: logo,
          ),
    );
  }
 
  Widget opacityWithTranslationRotation() {
    return Animator(
      tweenMap: {
        'opacity': Tween<double>(begin: 0, end: 1),
        'translation': Tween<Offset>(begin: Offset.zero, end: Offset(1, 0)),
        'rotation': Tween<double>(begin: 0, end: 4 * pi),
      },
      duration: Duration(seconds: 2),
      cycles: 0,
      builderMap: (Map<String, Animation> anim) => FadeTransition(
            opacity: anim['opacity'],
            child: FractionalTranslation(
              translation: anim['translation'].value,
              child: Transform.rotate(
                angle: anim['rotation'].value,
                child: logo,
              ),
            ),
          ),
    );
  }
 
  Widget opacityWithTranslationRotationColor() {
    return Animator(
      tweenMap: {
        'opacity': Tween<double>(begin: 0, end: 1),
        'translation': Tween<Offset>(begin: Offset.zero, end: Offset(1, 0)),
        'rotation': Tween<double>(begin: 0, end: 4 * pi),
        'color': ColorTween(begin: Colors.blueAccent, end: Colors.redAccent),
      },
      duration: Duration(seconds: 2),
      cycles: 0,
      builderMap: (Map<String, Animation> anim) => FadeTransition(
            opacity: anim['opacity'],
            child: FractionalTranslation(
              translation: anim['translation'].value,
              child: Transform.rotate(
                angle: anim['rotation'].value,
                child: Stack(
                  alignment: Alignment.topCenter,
                  children: <Widget>[
                    Container(
                      width: 50,
                      height: 50,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        shape: BoxShape.circle,
                      ),
                    ),
                    Container(
                      width: 50,
                      height: 50,
                      decoration: BoxDecoration(
                        color: anim['color'].value,
                        shape: BoxShape.circle,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.all(20.0),
        child: Center(
          child: opacityWithTranslationRotationColor(),
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *