[MUSIC PLAYING] EMILY FORTUNA: Hello. It's Emily here with
the Flutter team. So you decide to include an
animation in your Flutter app. How exciting. The thing is there are a lot
of different animation widgets so figuring out which
one is most appropriate can feel a little overwhelming. Fortunately, this
video is here to help. I'll walk through a
series of questions you can ask yourself
about the animation you have in mind to
help you determine how you should create it. The other thing to
remember is the animation which is provided
in the core Flutter library are pretty low level. This means if you have
a complex animation, I recommend you check
out some of the animation packages available on Pub
that provide higher level interfaces. Broadly speaking, there
are two main types of animations that
you might want to include in your Flutter
app, drawing-based animations and code-based animations. Code-based animations
are widget focused and are rooted in
standard layout and style primitives like rows, columns,
colors, or text styles. That's not to say
they're boring or simple. But at their heart,
they tend to enhance a particular existing widget's
appearance or transition rather than acting as
a standalone widget in their own right. Drawing-based
animations, in contrast, look like someone drew them. They're often standalone
sprites like game characters or involve transformations that
would be challenging to express purely in code. So the first question to ask
yourself is, "is my animation more like a drawing?" or does it look more like
something you can build out of Flutter widget primitives? If your animation is
more like a drawing, or if you're working with a
design team who will provide vector or raster
image assets, then I recommend you use a third-party
tool such as Rive or Lottie to build your animation
graphically and then export it to Flutter. There are several
packages that can help you include these
assets in your Flutter app. Otherwise, if your animations
involve mutating widgets, such as changing colors,
shapes or positions, stay tuned and we'll write
some Flutter code. Oh hey, so you want
to write some code? Flutter code-based
innovations come in two flavors,
implicit animations and explicit animations. The next step is figuring
out which type you need. Inputs and animations rely on
you simply setting a new value for some widget property. And Flutter will take
care of animating it from the current value
to the new value. These were just are really easy
to use and amazingly powerful. All the animations
you see right now are done with implicitly
animated widgets. Implicit animations
are a good place to start when looking
to animate something. Explicit animations require
an animation controller. They're called explicit
because they only start animating when
explicitly asked to. You can use explicit
animations to do everything you can with implicit
animations plus a little more. The annoying thing
is you have to manage the lifecycle of that
animation controller since it's not a widget,
which means putting it inside of a stateful widget. For that reason, your
code is generally simpler if you can get away with
using an implicit widget. There are three questions you
can ask yourself to determine which type of widget you need. Does my animation
repeat forever? And when I say forever, I
mean while on a certain screen or as long as a certain
condition is true, such as music playing. The second question
to ask yourself is whether the values in your
animation are discontinuous. Example of what I
mean by discontinuous is this growing
circle animation. The circle repeatedly grows
small, large, small, large. It never grows small, large, and
then shrinks back down again. In this case, the circle
size is discontinuous. The last question
to ask yourself is whether multiple
widgets are animating in a coordinated
fashion together. If you answered yes to any
of those three questions, you'll need an explicit widget. Otherwise, you can use
an implicit widget. Once you've decided whether you
need an implicit or explicit widget, the last
question will lead you to finding the specific
widget you need. Ask yourself, is there a
built in widget for my needs? If you're looking for a built-in
implicit animation widget, look for widgets
named animated foo where foo is the property
you want to animate. Also check out
animated container as it's extremely
powerful and versatile as a widget for many
different implicit animations. But if you can't find the
built-in implicit animation you need, you can use
tween animation builder to create a custom
implicit animation. Conversely, if you're looking
for a built-in explicit widget, they're usually called
FooTransition where foo is the property you're animating. If you can't find the built-in
explicit animation you want, there's one last question
you need to ask yourself. Do I want my animation to be
a standalone widget or part of another surrounding widget? The answer to this one is
more of a matter of taste. If you want a standalone,
custom explicit animation, you should extend
animated widget. Otherwise, you can
use AnimatedBuilder. There's one last
thing to consider if you're seeing
performance problems and that is animating
with CustomPainter. You can use it much
like AnimatedWidget, but CustomPainter
paints directly to the canvas without the
standard widget build paradigm. When used well, you can create
some neat, extremely custom effects or save on performance. But when misused, your
animation could cause even more performance issues. So take care. And much like manual
memory management, make sure you know what
you're doing before sprinkling shared pointers everywhere. In summary, there are a
series of high level questions you can ask yourself to
create your animation. The sequence of questions
creates a decision tree for determining which
widget or package is right for your needs. If you collapse
those endpoints, they fall into a line approximately
indicating difficulty from left to right. That's all you need to know. Go create great photo
animations through a third-party
framework, packages, explicitly or implicitly. Thanks for watching. [MUSIC PLAYING]
