Animation In Flutter: AnimationController

In Flutter, we have basically two types of animation: Implicit, and Explicit.
The Implicit animations are the pre-built animations available in the Fluter SDK.
The Explicit animations need a controller to perform an animation.
The previous two articles in this series we have seen AnimatedAlign and AnimationCrossFade, which are nothing but an Implicit animation as they don't require any type of controller.
There are different Implicit animations available in the Flutter For example, AnimatedContainer, AnimatiedOpacity, AnimatedIcon, etc.
On the other hand, In Explicit animation AnimationController is required. The AnimationController represents an interpolated range of values that define all possible frames for a particular animation. Let's take a look at the AnimationController in detail.

AnimationController

The AnimationController, as its name implies, is in charge of the animation. It gives you the values that are interpolated between upperBound and lowerBound.
The upperBound and lowerBound parameters are set to 0.0 and 1.0 by default.
We may use this controller to play animation in either a forward or backward motion.
The interpolated values between the lowerBound and upperBound are generated in every new frame as the animation starts.
A SingleTickerProviderStateMixin is required to function with AnimationController. After extending your state, use SingleTickerProviderStateMixin to accomplish this:

class _MyHomePageState extends State<MyHomePage> with 
SingleTickerProviderStateMixin {
  //....
}

Now, Let's define one AnimationController :

class _MyHomePageState extends State<MyHomePage> with 
TickerProviderStateMixin {
  late AnimationController _controller;
}

Let's override the initState method to create this _controller. AnimationController can be instantiated using a variety of lifecycle methods, although initState is the most frequent ().

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(milliseconds: 500),
    vsync: this,
  );
}

As shown in the code above, we instantiated the controller class by passing two parameters, namely,
duration: This is the total length of time this animation should last.
vsync: A TickerProvider is required. As a result, we must employ SingleTickerProviderMixin. The value this in this case means nothing but refers to the class's current context.
Offscreen animations are prevented from spending unnecessary resources thanks to the presence of vsync.

Remember to dispose of the _controller in the dispose() method. Because it eliminates memory leaks by disposing of the AnimationController when it is no longer required.

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

Now to use this _controller let's first design a simple UI.
https://gist.github.com/red-star25/7e5708e4d72cf70964e0b796900d0537
As you can see it's a simple UI with two images defined in the Stack widget. The first one is the basketball area and the second one is the basketball, which we are going to animate.
Now to move the basketball from top to bottom and bottom to top we need to update the y offset of the ball. So let's give the _controller value to the Offset y.
https://gist.github.com/red-star25/3937866ac53396e52f7eef6fae2107ba
Still, there will be no change in the UI. It's because we didn't tell the _controller when to start the animation.
To update the UI when the _controller value changes, We first need to listen to that update. For that, _controller has one method addListener which as the name suggests listens to the controller values when it changes.
Let's call that method in the initState :

@override
void initState() {
  super.initState();
  // .....
  _controller.addListener(() {
    setState(() {});
  });
}

The setState is used to update the UI when _controller values changes.
Now to run the animation AnimationController provides many methods :
forward: The animation will go from lowerBound to upperBound.
reverse: The animation will go from upperBound to lowerBound.
repeat: The animation will repeat itself from lowerBound to upperBound and from upperBound to loweBound.
stop: The animation will stop running.
reset: The animation will go to the initial condition.
In our case, we want to make our ball bounce. To do that we need to call repeat method. So let's call it in the initState.

void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(milliseconds: 500),
    vsync: this,
    upperBound: 650.0,
    lowerBound: 400.0,
  );
  _controller.addListener(() {
    setState(() {});
  });
  _controller.repeat(reverse: true);
}

And Voila!!!

Wrapping Up

The above animation appears strange because it lacks a smooth bouncing effect. In the next post, we'll look at how to use the Animation class to give the above animation a smooth bouncing motion.
Thank you for taking the time to read this. If you find it beneficial, please share it with others.
See you in the upcoming article. Until then...

Animation In Flutter: AnimationController

Comments

Animation In Flutter

Animation In Flutter: AnimatedCrossFade

More from this blog

100 Blogs Later: Lessons from Code, Content, and Consistency

A Practical Journey from Application to Distributed Systems - Part 6

A Practical Journey from Application to Distributed Systems - Part 5

A Practical Journey from Application to Distributed Systems - Part 4

A Practical Journey from Application to Distributed Systems - Part 3

AnimationController

Wrapping Up

Command Palette

Comments

Animation In Flutter

Animation In Flutter: AnimatedCrossFade

More from this blog

AnimationController

Wrapping Up