Animation In Flutter: AnimationController

Animation In Flutter: AnimationController

Get more control over the animation

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article
  • 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.
  • animationControllerUI.png
  • 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.
  • 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!!! animationControllerBouncing.gif

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...
  • PeaceOutImOutGIF.gif
 
Share this