• 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...
•