AnimatedContainer
to gradually change values over timeAnimatedCrossFade
to cross‐fade between two children widgetsAnimatedOpacity
to show or hide widget visibility by animated fading over timeAnimationController
to create custom animationsAnimationController
to control staggered animationsIn this chapter, you'll learn how to add animation to an app to convey action, which can improve the user experience (UX) if appropriately used. Too many animations without conveying the appropriate action can make the UX worse. Flutter has two types of animation: physics‐based and Tween. This chapter will focus on Tween animations.
Physics‐based animation is used to mimic real‐world behavior. For example, when an object is dropped and hits the ground, it will bounce and continue to move forward, but with each bounce, it continues to slow down with smaller rebounds and eventually stop. As the object gets closer to the ground with each bounce, the velocity increases, but the height of the bounce decreases.
Tween is short for “in‐between,” meaning that the animation has beginning and ending points, a timeline, and a curve that specifies the timing and speed of the transition. The beauty is that the framework automatically calculates the transition from the beginning to end point.
Let's start with a simple animation by using the AnimatedContainer
widget. This is a Container
widget that gradually changes values over a period of time. The AnimatedContainer
constructor has arguments called duration
, curve
, color
, height
, width
, child
, decoration
, transform
, and many others.
The AnimatedCrossFade
widget provides a great cross‐fade between two children widgets. The AnimatedCrossFade
constructor takes duration
, firstChild
, secondChild
, crossFadeState
, sizeCurve
, and many other arguments.
If you need to hide or partially hide a widget, AnimatedOpacity
is a great way to animate fading over time. The AnimatedOpacity
constructor the takes duration
, opacity
, curve
, and child
arguments. For this example, you do not use a curve; since you want a smooth fade‐out and fade‐in, it's not necessary.
The AnimationController
class gives you increased flexibility in animation. The animation can be played forward or reverse, and you can stop it. The fling
animation uses a physics simulation like a spring.
The AnimationController
class produces linear values for a giving duration, and it tries to display a new frame at around 60 frames per second. The AnimationController
class needs a TickerProvider
class by passing the vsync
argument in the constructor. The vsync
prevents off‐screen animations from consuming unnecessary resources. If the animation needs only one AnimationController
, use SingleTickerProviderStateMixin
. If the animation needs multiple AnimationController
s, use TickerProviderStateMixin
. The Ticker
class is driven by the ScheduleBinding.scheduleFrameCallback
reporting once per animation frame. It is trying to sync the animation to be as smooth as possible.
The AnimationController
default object ranges from 0.0 to 1.0, but if you need a different range, you can use the Animation
class (using Tween
) to accept a different type of data. The Animation
class is initiated by setting the Tween
class (in‐betweening) begin
and end
property values. For example, you have a balloon that floats from the bottom to the top of the screen, and you would set the Tween
class begin
value of 400.0, the bottom of the screen and the end
value of 0.0, the top of the screen. Then you can chain the Tween animate
method, which returns an Animation
class. Simply put, it animates the Tween based on the animation, such as a CurvedAnimation
class.
The AnimationController
class at first can seem complex to use because of the different classes needed. The following are the basic steps that you take to create a custom animation (shown in Figure 7.1) or, eventually in the example, multiple animations running at the same time.
AnimationController
.Animation
.AnimationController
with Duration
(milliseconds, seconds, and so on).Animation
with Tween
with begin
and end
values and chain the animate
method with a CurvedAnimation
(for this example).AnimatedBuilder
with Animation
using a Container
with a balloon to start Animation
by calling the AnimationController.forward()
and .reverse()
to run the animation backward. The AnimatedBuilder
widget is used to create a widget that performs a reusable animation.As you can see, once you break down the steps, it becomes more manageable and less complicated.
In the preceding example, I showed how you can use multiple AnimationController
s to run at the same time with different Duration
values. In the next section, you'll use one AnimationController
for a staggered animation.
A staggered animation triggers visual changes in sequential order. The animation changes can occur one after the other; they can have gaps without animations and overlap each other. One AnimationController
class controls multiple Animation
objects that specify the animation in a timeline (Interval
). Now you'll walk through an example of using one AnimationController
class and the Interval()
curve
property to start different animations at different times. As noted in the preceding section, a staggered animation uses Interval()
to begin and end animations sequentially or to overlap one another.
In this chapter, you learned how to add animations to your app to improve the UX. You implemented AnimatedContainer
to animate the width of a Container
widget with a beautiful spring effect by using Curves.elasticOut
. You added the AnimatedCrossFade
widget to cross‐fade between two children widgets. The color is animated from amber to green while at the same time the widget increased or decreased in width and height. To fade a widget in, out, or partially, you added the AnimatedOpacity
widget. The AnimatedOpacity
widget uses the opacity
property passed over a period of time (Duration
) to fade the widget. The AnimationController
class allows the creation of custom animations.
You learned to use multiple AnimationController
s with different durations. You used two Animation
classes to control the floating upward or downward and the inflation and deflation of the balloon at the same time. The animation is created by using Tween
with begin
and end
values. You also used different CurvedAnimation
class for a nonlinear effect like Curves.fastOutSlowIn
to float upward or downward and Curves.elasticInOut
to inflate or deflate the balloon. Lastly, you used one AnimationController
class with multiple Animation
classes to create staggered animations, which give a similar effect as the previous example.
In the next chapter, you'll learn the many ways of using navigation such as Navigator
, Hero
Animation
, BottomNavigationBar
, BottomAppBar
, TabBar
, TabBarView
, and Drawer
.
TOPIC | KEY CONCEPTS |
AnimatedContainer |
This gradually changes values over time. |
AnimatedCrossFade |
This cross‐fades between two child widgets. |
AnimatedOpacity |
This shows or hides widget visibility by animating fading over time. |
AnimatedBuilder |
This is used to create a widget that performs a reusable animation. |
AnimationController |
This creates custom animations by using TickerProviderStateMixin , SingleTickerProviderStateMixin , AnimationController , Animation , Tween , and CurvedAnimation . |