Zero to Hero in Flutter Animations

Animations play a significant part in upgrading your application’s general user experience from the motion, and up to the custom animations, you can actually envision!. Like some other items integrated into an application, animations should be useful instead of simply a regular stylistic layout.

Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience. Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.

In this article, we will explore the fundamental components of animations in Flutter.

In Flutter there are two types of animations. They are implicit animation and explicit animation.

Implicit animation: The implicit animation could be separated into worked-in widgets and customized widgets. ImplicitAnimationWidget is an abstract class for building widgets that animate changes to their properties. Widgets of this sort won’t animate when they are first added to the widget tree. Or maybe, when they are rebuilt with various values, they will react to those progressions by animating the progressions over a predetermined duration.

Implicit animations are simple and easy to use as they 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 choose a duration and curve for the animation.

Some of the implicit animations in Flutter are:

• 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.
• AnimatedScale, which is an implicitly animated version of Transform.scale.
• AnimatedRotation, which is an implicitly animated version of Transform.rotate.
• AnimatedSlide, implicitly animates the position of a widget relative to its normal position.
• AnimatedOpacity 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.

Explicit animation: Suppose you want to create your complex Flutter animation without using the animations library; explicit animation is what you are looking for.

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. This approach enables you to create effects you can’t achieve using implicit animations.

However, before we can dive into creating explicit animations in Flutter, we need to understand some basic concepts beforehand. These are the core topics that will be used in any kind of explicit animations that we build.

AnimationController
Ticker Provider
Animation
Tween
Animated Widget

1. Animation Controller: The animation controller controls and manages the animations’ properties like upper/lower bound, duration, progress, and so on. It produces values that range from 0.0 to 1.0. The animation controller generates a new value whenever the device running your app is ready to display a new frame. The value to the animation controller is always provided in the initState method.

Animation Controller requires the Ticker Provider value named vsync.

2. Ticker Provider: TickerProvider class is an interface implemented by classes that can vend Ticker objects. Ticker objects are the objects that call the callback once per animation frame.

Tickers can be used by any object that wants to be notified whenever a frame triggers but are most commonly used indirectly via an AnimationController. AnimationControllers need a TickerProvider to obtain its Ticker.

If you are creating an AnimationController from a State, you can use the TickerProviderStateMixin and/or SingleTickerProviderStateMixin classes to obtain a suitable TickerProvider.

3. Animation: An animation consists of a value (of type T) together with status. The status indicates whether the animation is conceptually running from beginning to end or from the end back to the beginning, although the actual value of the animation might not change monotonically.

Animations also let other objects listen for changes to either their value or their status. These callbacks are called during the “animation” phase of the pipeline, just prior to rebuilding widgets.

Tween is used to create an animation subclass that converts Animation<double> into other kinds of animations.

4. Tween: Tween is the linear interpolation between a beginning and ending value. It is used to create an animation subclass that converts Animation<double> into other kinds of animations. Tweens are mutable, which means the begin and end values of tweens can be changed at runtime.

Tween objects can be chained together using the chain method so that a single Animation object is configured by multiple Tween objects called in succession. To use a Tween object with an animation, call the Tween object’s animate method and pass it to the Animation object that you want to modify.

5. Animated widget: Animated widget is an abstract class for building widgets that automatically transitions its size over a given duration whenever the given child’s property changes. It builds widgets that rebuild when the given Listenable changes value. Some of the animated widgets are:

• AnimatedBuilder, which is useful for complex animation use cases and a notable exception to the naming scheme of AnimatedWidget subclasses.
• AlignTransition, which is an animated version of Align.
• DecoratedBoxTransition, which is an animated version of DecoratedBox.
• DefaultTextStyleTransition, which is an animated version of DefaultTextStyle.
• PositionedTransition, which is an animated version of Positioned.
• RelativePositionedTransition, which is an animated version of Positioned.
• RotationTransition, which animates the rotation of a widget.
• ScaleTransition, which animates the scale of a widget.
• SizeTransition, which animates its own size.
• SlideTransition, which animates the position of a widget relative to its normal position.
• FadeTransition, which is an animated version of Opacity.
• AnimatedModalBarrier, which is an animated version of ModalBarrier.

For more information on animations and on flutter please visit flutter.dev

Do visit my portfolio site or connect with me on linkedin

Cheers!!