Flutter Animations: Part 4
Over the last few months, we've talked about the new cross-platform mobile development framework from Google called Flutter. We’ve reviewed a number of things in the series including:
In this blog, we'd like to cover a Widget that provides a more advanced way to animate with Flutter: The AnimatedBuilder Widget. According to the Flutter documentation, “The AnimatedBuilder is useful for more complex Widgets that wish to include an animation as part of a larger build function.” You usually won’t use AnimatedBuilder in your day to day coding. The implicit and transition animations will cover most of your needs. But if you come across a need for a more complex animation sequence, that touches several Widgets at the same time, the AnimatedBuilder may work for you.
Let’s look at some code.
To start, we create a Stateful and State Widget. The State widget will hold our Animation and AnimationController objects. (We covered Animation and AnimationController in Part 3 of this blog series.) Instead of an animation for an Offset, as we did in Part 3, we created an animation for a double value. The controller will animate the double value over a period of five seconds. The animation will be incremented from the value of 0 to 400 over five seconds. In the animation syntax, you’ll see a new syntax of ..addStatusListener
In Dart “..” is a cascade. It allows you to perform multiple operations on the members of a single object.
The addStatusListener allows us to register a callback listener that fires each time the animation value changes. In the listener function, we check the status of the animation and determine if it is completed or at the beginning (dismissed). This allows us to have the animation go forward and reverse. This is handled by calling the reverse() and forward() methods on the controller. The Animation and AnimationController objects manage the transition over the time of the animation. But what does the AnimationBuilder do?
Let’s look at our build method.
The essential Widget in this build method is the AnimatedBuilder. It takes two parameters. The first is the Animation object and the second is the builder method.
The builder method on the AnimatedBuilder gets called each time the animation value changes. This causes the Widgets in the return statement to be rebuilt with the new animation value. The transformed Widget will be rebuilt with a new value. The value comes from the controller.value with the value between 0 and 400.
This value is used to calculate the angle of the child widget. The child widget is a container. The animation value is also used to set the width and height of the Container Widget. As you can see, we can get the current animation value either from the Animation object or the AnimationController object.
Take a look at this video animation to see what it looks like.
This is an elementary example, but it provides a good overview of how the AnimatedBuilder works. It allows for an animation to rebuild a portion of the Widget tree over an animation sequence. If your animation affects multiple Widgets at the same time, an AnimatedWidget would be a key Widget to look at.
Next, we’ll throw a curve into Flutter animations as we look at Easing curves in Part 5.