An Introduction to Flutter Animation Tutorial

AnimatedBuilder

A general purpose widget for creating animations. AnimatedBuilder is useful for more complex widgets that want to include an animation as part of a larger build function. To use AnimatedBuilder, simply build the widget and pass it a builder function. For simple cases without additional state, consider using AnimatedWidget.

AnimatedContainer

An animated version of the container that gradually changes its values ​​over time. When they change using the provided curve and duration, the animatedcontainer will automatically animate between the old and new values ​​of the properties. Properties that are null are not animated. Its children and descendants are not animated. This class is useful for generating simple implicit transitions between different parameters for a container with its internal AnimationController. For more complex animations, you may want to use a subclass of AnimatedWidget, such as DecoratedBoxTransition or your own AnimationController.

AnimatedCrossFade

A widget that cross-fades between two given children and animates itself between its shapes. This widget is used to fade a pair of widgets with the same width. In the case where both children have different heights, the children overflow crops during the animation by aligning their top edges during the animation, which means the bottom will be clipped.  

AnimatedDefaultTextStyle

An animated version of the default text style that automatically applies the default text style (to apply the text style to a descent without a clear style) in any given period whenever the given style changes.  

AnimatedListState

State for a scroll container the items that are inserted when they are inserted or removed. An animation starts playing when an item is inserted with insert. Whenever the item’s widget is needed, the animation is sent to the AnimatedList.itemBuilder. When an item is removed with removeItem, its animation turns upside down. The animation of the deleted item is passed to the removeItem Builder parameter.  

AnimatedModalBarrier

A widget that prevents the user from interacting with the widget behind it, and can be configured with an animated color value. The modal barrier is the route given behind each route, which usually prevents the user from contacting the route under the current route, and usually partially obscures such routes. For example, when a dialog is on the screen, the page below the dialog is usually blackened by the modal barrier.  

AnimatedOpacity

An animated version of opacity that automatically changes a child’s opacity at any given period whenever the given opacity changes.  

AnimatedPhysicalModel

In this flutter animation tutorial, we are learning an animated version of PhysicalModel. BorderReduce and Height are animated. If the color is animated, it is animated; Otherwise, the color changes immediately to the beginning of the animation for the other two properties. This allows the color to be animated freely.  

AnimatedPositioned

In this flutter animation tutorial, we are learning an animated version of a position that automatically changes the position of a child over a given period of time when a given position changes. Only works when he is a child of the stack.   This widget is a good option if the child size will end up changing as a result of this animation. If the shape is intended to remain the same, with only the position changing over time, consider SlideTransition instead. SlideTransition only reprints each frame of the animation, while AnimatedPosed will also trigger a relayout.  

AnimatedSize

Whenever the size of a given child changes, the animated widget automatically resizes it over a given period of time.  

AnimatedWidget

AnimatedWidget is commonly used with animation objects that are listenable, but can be used with any listenable, including ChangeNotifier and ValueNotifier. AnimatedWidget is most useful for widgets that are otherwise stateless. To use AnimatedWidget, simply subclass it and implement the build function.  

AnimatedWidgetBaseState

A base class for flutter animation widgets with built-in animations that need to recreate their widget tree as an animation widget. This class call creates each frame that the animation tickets give. For a version that does not rebuild each frame, consider subclassing ImplicitlyAnimatedWidgetState directly. Subclasses should implement the forEachTween method to reorganize and animate the animatedTwitterBaseStat through the widget’s fields of subclasses.  

DecoratedBoxTransition

An animated version of the Decorated Box which shows the various qualities of its decoration.  

FadeTransition

Indicates the opacity of a widget. For a widget that automatically animates between two child sizes, fading between them, see AnimatedCrossFade.  

Hero

A widget that marks your child as a candidate for hero animation. When PageRoute is pushed or popped with the Navigator, the contents of the entire screen are changed. An old route disappears and a new route appears. If there is a common visual feature on both routes, it can be helpful to physically orient the user to physically move from one page to another during the route’s transition. This type of animation is called hero animation. During the transition the protagonist “flies” into the overlay of the flutter animation widgets navigator and when they are in flight, they are, by default, not shown in their original locations in the old and new routes.

To label a widget as such a feature, wrap it in a Hero widget. When navigation occurs, Hero widgets on each route are identified by the HeroController. For each pair of hero widgets with the same tag, a hero animation is triggered.

If a hero is already in flight due to navigation, then his flight animation will be redirected to its new destination. Flutter Animation Widgets shown in-flight during the transition are by default the hero of the destination route’s children. For a hero animation to trigger, the hero must be present on the first frame of the animation of the new page. The root must not have more than one hero for each tag.

PositionedTransition

An animated version of a position that takes a specific animation <relevant> to change the child’s position from an initial position to an end position throughout the animation’s lifetime.   Only works when he is a child of the stack. Here is a depiction of the positioning widget, animated by the CurvedAnimation set for CurvesAelimInOut.  

RotationTransition

Animates the rotation of the widget.  

ScaleTransition

Animates the scale of the converted widget.  

SizeTransition

Animates their own shapes and clips and aligns their child. SizeTransition acts as a ClipRect that reflects its width or its height depending on the value of the axis. The alignment of the child with the axis is specified by the axis.   Like most widgets, SizeTransition will conform to the constraints it gives, so be sure to place it in a context where it can be resized. For example, if you place it in the container with a fixed size, SizeTransition will not be able to change the size, and will appear to do nothing.  

SlideTransition

Animates the position of a widget relative to its normal state. The translation is expressed as an offset that reduces the size of the child. For example, an offset with dx of 0.25 would result in a horizontal translation of a quarter of the width of the child.  By default, the offset is applied to the canvas’s coordinate system (so positive x offsets move the child to the right). If a textdirection is provided, the offset is applied in the read direction, so in right-to-left text, the positive x offset moves to the left, and in left-to-right text, the positive x offset Increases to the right.