Animations with AnimatedCrossfade and AnimatedAlign

What’s article is about?

This article is about the Two animated widgets, which we can use to show the animation of the transition between two states of the widget.

So, let’s get started!

AnimatedCrossfade

This widget cross-fades between two given children and animates itself between their sizes.

First, we add two child widgets. Then we provide duration to define the time when the animation needs to be performed. After that, we fill the curve property to give a superb animation.

Lastly, to control the animation state, we use the crossFadeState property. The animation will automatically be triggered when we change the crossFadeState property.

Let’s see an example now!

First, we will define the state variable.

bool animate = false;

Now, let’s define the AnimatedCrossFade widget.

As you can see in the above code, we’ve provided FlutterLogo as a child. And we are changing the state of crossFadeState using the animate variable. In the firstCurve property, we’ll define how the animation will perform.

Let’s see some extra parameters -

secondCurve-: The fade curve of the second child.

reverseDuration-: This property is used to reverse the animation.

sizeCurve-: This property is used when two children have different heights, and we also want to animate their height change.

sizeCurve:  Curves.bounceOut,

alignment-: How the children should be aligned while the size is animating.

layoutBuilder-: A builder that positions the firstChild and secondChild widgets.

AnimatedAlign

It is an animation version of the Align widget, which animates the alignment change in a given duration.

Initial Requirements

We will use a stateful widget to change the state, which is our state variable.

bool animate = false;

When we change the value of animate, AnimatedAlign will automatically animate it.

I have given the FlutterLogo widget and curve property for better animation in the child property.

Which will look something like this in UI -

We can also call a function at the end of the animation using theonEnd property.

AnimatedAlign also has heightFactor and widthFactor. The change in their state will automatically animate them.

You can check out the demo here.

Hope this article has helped you learn something new today. If you’ve enjoyed reading this article, be sure to throw me a couple of claps!👏

Happy Learning :)