[MUSIC PLAYING]
MARTIN AGUINIS: Hello, I'm Martin Aguinis.
Welcome to our series on animation building blocks
in Flutter.
In this series, we're going to introduce you
to animations in Flutter and show you
how to build both simple and complex animations
for your Flutter app.
In this first video, we're going to focus
on the most straightforward way to add animations to your app.
You don't have to be an expert on animations or animation
terminology to add animations to your app.
Along the way, we'll introduce some widgets and terminology
that will help you get started with animations right away,
as well as give you some background
for the rest of the episodes.
Flutter includes a series of widgets
that are animated versions of existing widgets that you've
probably already used in your app,
such as the animated container version of the container
widget, and the animated position
version of the position widget.
These widgets automatically animate changes
to their properties.
When you rebuild the widget with new property
values such as with Stateful widget's set state.
The widget will handle driving the animation
from the previous value to the new value.
These widgets are called implicitly animated widgets.
And these widgets will typically be the first thing
you reach for when you need to add animations to your app.
They provide a means of adding animations
without adding additional complexity.
Let's look a little closer at how
you can use one of these implicitly animated widgets
to add some animations to your app.
In this app, we have a container and a button.
When the button is pressed, set state is called
and the container is rebuilt with a new value for width.
You'll notice that the container changes its width immediately
without any animation.
We can add some animation to this app
by swapping the container widget with an animated container
widget and specifying an animation duration.
Now, when the button is pressed, the container
will gradually animate from the previous width value
to the new value.
The process of animating through the values
between the old and the new is called interpolation.
The animated container handles interpolating
its property between old and new values whenever they change.
This applies to all the animated container's properties,
including, for example, the decoration.
We can modify the gradient with a decoration
and the animated container will handle
interpolating between the old and new gradient.
Implicitly animated widgets like animated container
have two properties that you can use to control the animation's
behavior.
You can control how long it takes
to interpolate to the new value by setting the duration
property.
In this example, we made the animation take
a much longer amount of time.
You can also control the way the widget interpolates
from the old to the new value by using a curve.
Curves control the rate of change over time
and can help your animations feel more realistic.
For this example, we'll change the curve
from the default linear curve to a cubic curve.
If you view the animations side by side,
you'll see that while they take the same amount of time,
the one with the cubic curve changes differently.
There are many different built in curves
available to give your animations a bit of character,
and you can also define your own custom curves.
Curves can even be discontinuous,
like the sawtooth curve.
Here's an example of a custom curve called sine curve that
uses a sine function to make a curve that
bounces back and forth.
Here, it's being used to make a star bounce up and down.
To summarize, Flutter provides implicitly
animated widgets that are animated versions
of common widgets.
You can control the way these widgets animate
using durations and curves.
Animated container is a specifically powerful,
implicitly animated widget, since it
has many properties that affect its appearance and all of them
are automatically interpolated.
All the other implicitly animated widgets
are also powerful, easy to use options
for adding animations without adding a lot of complexity.
You also don't necessarily need to place these widgets
into a Stateful widget and use set state.
You can use StreamBuilder and FutureBuilder
to trigger animations as well.
Implicitly animated widgets are going
to be your first choice for adding animations.
However, this isn't all that Flutter animation system
has to offer.
In the rest of this series, we'll
explore the lower layers of the Flutter animation system
and show you how you can build advanced animations by using
the animation system directly.
For everything else, go visit Flutter.dev.
[MUSIC PLAYING]