Home / How to / How to choose which Flutter Animation Widget is right for you? – Flutter in Focus

How to choose which Flutter Animation Widget is right for you? – Flutter in Focus

[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]

Source: Youtube

About umoh

Check Also

HOW TO: Change Your Steering Wheel

– Steering wheels have been allowing us to point our majestic horseless carriages wherever we …