Flutter provides a few built-In AnimatedWidget that derived from AnimatedWidget
. These widget takes a Listenable
object to manage its animation. Like OpacityTransition
. They are called explicit animated widgets as the developer needs to provide a Listenable
object like AnimaionController
, or Animation<T>
explicitily.
Flutter also ships with implicit animated widgets and these widgets doesn't require the Listenable
object. Instead they manages an internal AnimationController
to perform the animation. Thus making it easy to use and build animation. The Listenable
object is implicit to their widget, that is why they are called implicit animated widgets.
Implicity animated widgets are derived from the abstruct class ImplicitAnimatedWidget
. These widgets do not perform animation when they are added first time to the widget tree. Rather, when they are rebuilt with different values(target value), they will respond to those changes by animating the changes over a specified duration
.
While these widgets are simple to use and don't require you to manually manage the lifecycle of an AnimationController
, they are also somewhat limited: Besides the target value for the animated property, developers can only chose a duration
and curve
for the animation. If you require more control over the animation (e.g. you want to stop it somewhere in the middle), consider using a AnimatedWidget
or one of its subclasses (explicit animated widgets).
A number of implicitly animated widgets ship with the framework. They are usually named AnimatedFoo
, where Foo
is the name of the non-animated version of that widget. Commonly used implicitly animated widgets include:
AnimatedAlign
: which is an implicitly animated version of Align
.AnimatedContainer
: which is an implicitly animated version of Container
.AnimatedDefaultTextStyle
: which is an implicitly animated version of DefaultTextStyle
.AnimatedOpacity
: which is an implicitly animated version of Opacity
.AnimatedPadding
: which is an implicitly animated version of Padding
.AnimatedPhysicalModel
: which is an implicitly animated version of PhysicalModel
.AnimatedPositioned
: which is an implicitly animated version of Positioned
.AnimatedPositionedDirectional
: which is an implicitly animated version of PositionedDirectional
.AnimatedTheme
: which is an implicitly animated version of Theme
.AnimatedCrossFade
: which cross-fades between two given children and animates itself between their sizes.AnimatedSize
: which automatically transitions its size over a given duration.AnimatedSwitcher
: which fades from one widget to another.These widgets has a curve
parameter which specifies the animation curve. You can also provide the duration of the animation with the duration
property. These widgets also has onEnd
parameter which takes a callback which is called whenever the animation completes.