This post is notes taken from the following video: How to choose which Flutter Animation Widget is right for you? - Flutter in Focus
Additionally - this is a very detailed post from merixstudio that explains Flutter animations in a very clear an thorough manner.
Emily from the flutter team explains that Flutter animations in the core library are pretty low level and that https://pub.dev/ contains many packages with interfaces that help abstract the animations, making them easier to use.
There are generally 2 types of animations:
- Drawing based animations
- Code base animations
Code based animations are widget focused and enhance existing appearance or transition - such as making circular animation for scrolling through a list.
Drawing based animations reflect their name - looking like animated drawings. If you have access to raster or vector image assets - then you can use third party tools such as Rive or Lottie to build the animations and export them to Flutter.
Code based animations have 2 sub-groups:
- Implicit animations
- Explicit animations
Implicit animation involves setting a new value for a widget and Flutter taking care of the animation for you. Implicit animations are relatively straightforward and a good place to start learning about Flutter animations.
Explicit animations require an animation controller. These animations start when you want them to - however, this also means that you need to control the life-cycle of the animation controller. Plus it needs to reside inside a stateful widget as the animation controller is not a widget.
Three important questions to ask about animations are:
- Does the animation continue indefinitely on a particular screen?
- Is the animation discontinuous? For example, a circle that expands and then starts off again as a small circle - instead of the circle shrinking down by the same amount it grew by.
- Are multiple animations required at the same time to form a larger animation?
If any of the above is a "yes" then an explicit animation is needed. If not, then an implicit animation can be used. For built in implicit animation - look for widgets start start with "animated <foo>" - where foo is the widget that you want to animate. Animated container also had a lot of powerful functionality. Custom implicit animations can be created using TweenAnimationBuilder.
For explicit animations - look for "<foo>Transition", where foo is the property that is being animated. Lastly, custom explicit animation can either be by extending AnimatedWidget or AnimatedBuilder.
The very last choice is using CustomPainter. This paints directly to the canvas without standard widget build paradigm.
In summary, the questions to ask are:
- Flutter code or plugin?
- Is the animation like a drawing?
- Implicit or Explicit?
- Does it repeat indefinitely?
- Is it discontinuous?
- Are multiple animations required simultaneously?
- Built-in or Custom?
- Is there a built-in widget for my needs?
On an approximate scale of difficulty, the range is (starting with easiest):
- Built-in implicit animation
- TweenAnimationBuilder
- Built-in explicit animation
- AnimatedWidget
- CustomPainter