DEV Community

Appz Developer
Appz Developer

Posted on

Awesome Flutter Animation

To make an app’s UI alive, we use animations which is a complex procedure.

Ways of Animation Implementation

There are two different ways of implementing animations you can use when creating animations in Flutter.
Implicit animations
Explicit animations

Implicit Animations

This type of animation can be created via using a widget that is provided by Flutter core. You can modify a widget property by setting a target value; whenever that target value changes, the widget animates the property from the old value to the new one.

For example, we use AnimatedAlign widget to make a widget change its position based on alignment property or AnimatedContainer to animate a Container’s change of property such as decoration, height, width.

Explicit Animations

Explicit animations are a set of controls for telling Flutter how to rapidly rebuild the widget tree while changing widget properties to create animation effects.

The animation property is controlled via an AnimationController. It is often coupled with the AnimatedBuilder widget to animate any of its children widgets.

Built-in widget
AnimatedAlign
AnimatedContainer
AnimatedCrossFade
AnimatedDefaultTextStyle
AnimatedListState
AnimatedOpacity
AnimatedPhysicalModel
AnimatedPositioned
AnimatedModalBarrier
AnimatedSize
DecoratedBoxTransition
FadeTransition
PositionedTransition
RotationTransition
ScaleTransition
SizeTransition
SlideTransition
AnimatedBuilder
AnimatedWidget

Discussion (0)