Implicit Animation with AnimatedCrossFade🤩

Hi devs, Today we are going to see the quick implementation of Implicit animation by using the AnimatedCrossFade widget.

Motivation✌️

Animations are the most important part of a user experience and if we can get a better user experience by writing a few lines of code, what are you waiting for 👻

What is the AnimationCrossFade widget?🤔

The AnimationCrossFade widget does the animation between two widgets on a certain condition and at a certain time duration and the widgets can be any type like Text, Color, Size, Column, Container, etc.

So Let’s start

Here we are going to achieve the play and pause animation by using the AnimationCrossFade widget.

Now take a look at the above code. I created a bool variable named _playState and every time when the user hits the icon I only changed the state from true to false or false to true.

Key key: The widget key for controlling.

Widget firstChild : The child to be shown when crossFadeState is CrossFadeState.showFirst

Widget secondChild : The child to be shown when crossFadeState is CrossFadeState.showSecond

Duration duration : Duration to complete the animation.

Curve firstCurve: The fade curve of the first child.

Curve secondCurve : The fade curve of the second child

Curves : By default first and second child cuves are linear

Curse sizeCurve: The curve of the animation between the two children's sizes

CrossFadeState crossFadeState : CrossFadeState determines whether to show the first child or second child

Duration reverseDuration: Duration of the animation when running in reverse.

AligntmentGeometry alignment: Child alignment when the animation is running

AnimatedCrossFadeBuilder layoutBuilder: A builder for positioning the first child and the second child

GitHub Repo link here👇

osamaasifoak/animation_in_flutter

Hurray…!!!🥳🥳🥳

So these are the basic steps to use the AnimatedCrossFade widget. Support me by giving claps and follow me if you like it🙏🏽

Osama Asif