Flutter Animation Series Part 1: Animation Builder

Photo by Pixbay

I remember how difficult it was to develop our own custom animation on native Android by creating numerous XML files, their corresponding themes and then the Java code. 😤 😤 😤

In Flutter, we don’t have to be concerned about this. Animation in Flutter is super easy, decreasing our development time and ensuring a smooth and fluid UX. In addition to their usual functionality, these widgets can be customised to match our individual needs.

So sit tight and just follow along with me as I will go over all of Flutter’s animation widgets with examples in this Flutter Animation Series. The first widget in this Animation Series is AnimatedBuilder.

AnimatedBuilder:- AnimationBuilder is a Flutter animation widget that allows you to create complex animations which requires a widget and a builder function.

Let’s take a look at how to build a custom animation using AnimationBuilder:

1. Making an animation.

Animation _heartbeatAnimation = Tween(begin: 180.0, end: 160.0).animate(
  CurvedAnimation(
    curve: Curves.easeOutBack,
  ),
);

Tween is used to configure an animation to playback over a range of values.

CurvedAnimation defines progression as a non-linear curve. It brings out the smoothness when the animation is being played.

Here, I have my animation value fluctuating from 160–180 and I can use these changing values in the widget’s height, width, pixels and so on, depending on my animation needs, and I have also added a curve that will determine how my animation looks.

2. Using animation value in the widget.

AnimatedBuilder(
  builder: (BuildContext context, Widget child) {
    return Container(
      child: Center(
        child: Icon(
          Icons.favorite,
          color: Colors.blue[900],
          size: _heartbeatAnimation.value,
        ),
      ),
    );
  },
)

Here I am changing the size of an icon which will range between 160–180 and returning this widget to AnimationBuilder.

3. Controlling animation

We have reached the end of the process of creating an animation. What we need now is a controller that will start or stop an animated widget, and Flutter has AnimationController to do just that. Let’s have a look at how.

Here we need a Stateful Widget to use AnimationController.

i) Initialize AnimationController.

AnimationController _animationController;

@override
void initState() {
  super.initState();

  /// initializing AnimationController
  _animationController = AnimationController(
    vsync: this,

    /// duration is the period of time the animation would last
    duration: Duration(
      seconds: 1,
    ),
  );
}

ii) Using initialized AnimationController value.

CurvedAnimation needs a parent as AnimationController on which curve will be applied.

_heartbeatAnimation = Tween(begin: 180.0, end: 160.0).animate(
  CurvedAnimation(
    curve: Curves.easeOutBack,
    parent: _animationController,
  ),
);

Passing out _animationController value to the AnimatedBuilder.

AnimatedBuilder(
  animation: _animationController,
  builder: (BuildContext context, Widget child) {
    return Container(
      child: Center(
        child: Icon(
          Icons.favorite,
          color: Colors.blue[900],
          size: _heartbeatAnimation.value,
        ),
      ),
    );
  },
)

iii) Triggering Animation

To start:- _animationController.forward()

To stop:- _animationController.stop()

and yes don’t forget to dispose of _animationController.

@override
void dispose() {
  _animationController.dispose();
  super.dispose();
}

iv) Listening animation

_animationController.addStatusListener(
  (AnimationStatus status) {
    if (status == AnimationStatus.completed) {
      _animationController.repeat();
    }
  },
);

If we want to listen to animation status we can use a listener to do so as this continuously monitor animation changes.

Using _animationController.repeat(), I was able to repeat the animation as soon as it was finished, .repeat() will restart the animation at the beginning in the same manner as before.

Here is the end result:

Check out the full code here and the live demo on the Web.

I’ll be back with another animation widget in the next article, but for now, Goodbye and Happy Fluttering!

If you find this article useful, please do hit the clap icon 👏 and share it with your friends, as it will motivate me to write more.

Feel free to connect with me on social media platforms for any doubts regarding Flutter.

Ashutosh Singh