Febin's Knowledge Garden

Appearance

Animations ​

I recently started learning about animations in Flutter after shying away for so long.

There are two types of animated widgets in flutter:

  • Implicitly Animated Widget
  • (Explicitly) Animated Widgets

Implicitly Animated Widgets ​

  • Widgets like AnimatedContainer and AnimatedPositioned automatically animate when a property is changed.
  • Normally, the widgets are named AnimatedFoo.

Creating Implicitly Animated Widget: ​

  • Using TweenAnimationBuilder, we can build our own animated widgets.
  • Tweens will animate smoothly from a begin value to an end value.
  • The end value can be dynamically changed from outside making it interactive.

Explicitly Animated Widgets ​

  • Explicitly animated widgets use an animation controller to drive the animation.
  • FooTransition widgets like RotationTransition and SlideTransition take in an animation controller and can be used to go back and forth.

Creating Explicitly Animated Widget ​

  • Animated Builders can be used to build out explicitly animated widgets.
  • If necessary, an entirely new widget extending AnimatedWidget.

Barebones: ​

In reality, Animations in Flutter are really just calling setState very fast in response to the ticker's callback. This is why all animation controllers need a Ticker (calls a callback on every frame).