By WalkingTree February 08, 2021
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.
Flutter 2.0 has created a foundation for developing rich, intuitive web applications by leveraging features offered by web…
In recent times, due to the effects of the pandemic, a mask detecting app is in great need….
Theming is styling an application so that its look and feel matches your personal design aesthetic or that…