Flutter Animations Cheat Sheet

Tomek Polański
Jul 26, 2019 · 2 min read
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:

https://flutter-animations-cheat-sheet.codemagic.app/#/

Transitions and Animated Widgets

When doing animations in Flutter you will come across approaches: Transitions and Animated Widgets.

(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

(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.

Flutter Community

Articles and Stories from the Flutter Community

Flutter Community

Articles and Stories from the Flutter Community

Tomek Polański

Written by

Passionate mobile developer. One thing I like more than learning new things: sharing them

Flutter Community

Articles and Stories from the Flutter Community