Flutter Animations Cheat Sheet
Since writing Flutter Layout Cheat Sheet article, I intended to create a similar article about Flutter’s animations.
Unfortunately using GIFs or videos is not the greatest way to show the potential of animations. I was not able to teach animations compellingly… until now, thanks to Flutter Web.
If you want to check out Flutter Animations Cheat Sheet written in Flutter, please visit that article.
Let us know how you like it!
Curves
An integral part of animations are Curves. They allow specifying when animation speeds up and when it slows down.
Now at Flutter Animations, you have an easy way to compare them:
Transitions and Animated Widgets
When doing animations in Flutter you will come across approaches: Transitions and Animated Widgets.
Transitions
(e.g. SlideTransition) are lightweight and you and more clean to combine. They do not need to be placed it a StatefullWidget to work, but they need to have access Animation object (usually is an AnimationController).
In the beginning, Transitions might be harder to use vs Animated Widgets, but in the long run, they end up with cleaner code when creating more advanced animations.
Current Transitions in Flutter Animations:
SlideTransition, ScaleTransition, RotationTransition, SizeTransition, FadeTransition, PositionedTransition, RelativePositionedTransition, DecoratedBoxTransition, AlignTransition, DefaultTextStyleTransition
Animated Widgets
(e.g. AnimatedCrossFade) are more compound, prebuild solution. They might integrate multiple animations — AnimatedContainer can animate size, colour, border, … at the same time. To create similar animation with Transitions it would require much more code.
The downside of Animated Widgets is that they are much less flexible to change and they need to be in a StatefullWidget as setState() need to be called.
Animated Widgets are in the created with Transition internally — in case you need more custom widget, just use Transitions.
Current Animated Widgets in Flutter Animations:
AnimatedCrossFade, AnimatedContainer, AnimatedPadding, AnimatedAlign, AnimatedPositioned, AnimatedPositionedDirectional, AnimatedOpacity, AnimatedDefaultTextStyle, AnimatedPhysicalModel
While Flutter Web is in preview, the page works the best with Chrome on desktop.
