By WalkingTree  February 08,  2021

How to use the Animated Cross Fade widget in Flutter

Flutter is quite popular and known for its incredible selection of widgets and tools. The Animated Cross Fade widget is a crossfade between given children, it animates itself between its shapes. It is animated in the same place and changes its shape and color and can be used in any other widget such as text images. The crossFadeState parameter controls the animation. Let’s take a look at some of the properties of Animated CrossFade. 

  • FirstChild: This appears before the second widget is erased by the transition.
  • SecondChild: The secondChild represents the second widget to which the first child will transition. 
  • firstCurve/secondCurve: The animation affects the first curve and second curve’s first child and second child.
  • sizeCurve: The sizeCurve is used to animate the size of the fading-out child and the size of the fading-in child.
  • Duration: Used for setting the time for animation. 
  • Alignment: Defines how the children should align.
  • ReverseDuration: This is used to set the time taken in animation to be completed in reverse order.

To get started with the animation, first, take two images. Which we have initialized inside the first and second child properties. And clicking on the image shows the second image to be animated. The stateful widget is now required to implement the AnimatedCrossFade widget. Read on to know more about the code implementation of the Animated Cross Fade in Flutter.


Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.