Introduction to Animation in Flutter

Introduction To Topic :

Implementing animation into your app might be the best idea to make your app more smooth, polished, slick, and nice. In flutter using animation is quite simple.

In general, flutter provides us two types of animation — Tween animation and Physics-based animation. Tween animation is used if we want to animate a widget with a fixed start and finish. While Physics-based animation relies on the user interaction.

Table of content :

Tweens

Animation curves

Ticker Providers

AnimationController

Tweens

Tween is an object that takes a start value and an end value. Value can be anything like color, opacity. We can use Tween to change the color of appBar from blue to pink or any other colors. The change in color is handled by the Animation library. The Tween value lies between 0.0 to 1.0.

Tween( begin: 0.0, end: 1.0, );

Animation curves

Animation curves are used to define to flow rate of animation. It fixes the path of animation, allows the animation to speed up or slow down at a specific point. Flutter provides us Curves class. The default curve is linear. Curves class is packed with a variety of curves path eg. easeIn, elasticIn etc.

Ticker Providers

Ticker can be used by the object that needs to be notified every time the frame changes triggers. TickerProviderclass provides a ticker for the widget.

Using TickerProvider :

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

AnimationController

By the name, we can understand that it’s a controller that controls the animation. This object has so many properties. The object must be initialised inside the initState() of the class.

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  
@override
  void initState() {
    _animation = AnimationController(
      vsync: this,
      duration: Duration(
        seconds: 1,
      ),
    );
    super.initState();
  }

@override
  Widget build(BuildContext context) {
    return Container();
  }
}

Creating a color animation:

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

@override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(
        seconds: 1,
      ),
    );
    _animation = ColorTween(begin: Colors.deepOrangeAccent, end: Colors.green)
        .animate(_animationController);

    _animationController.forward();
    super.initState();
  }

@override
  Widget build(BuildContext context) {
    return Container(
        height: 50,
        color: _animation.value,
  );  }
}

This is an example to create your first animation. Here I have just used all the above topics. So let me summarize the whole scenario.The first step is to add TickerProviderStateMixin to the state class of StatefulWidget. Then create a AnimationController that we will use to perform various actions with the animation. Then you need to initialize a AnimationController object that is use to pass the current class context and duration and any more. To pass the Tween create a Animation and pass ColorTween object (inside the initState() method) that takes the start and end color that we need to change while animating the container colors. Then add animate() ,this allows Tweens to be chained before obtaining an Animation. Now forward that AnimationController , so that it can get started with animation _animationController.forward(); .

Adding curve in animation:

CurveAnimation() creates a curved animation. It takes a parent, curve arguments. parent takes a AnimationController and curve takes a Curve .

_animation = ColorTween(begin: Colors.red, end: Colors.green)
    .animate(CurvedAnimation(
  parent: _animationController,
  curve: Curves.bounceIn,
));

Now you are ready to go to implement animation into your apps. Thanks…

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.