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.
In this blog series, we started with an introduction to Dart and Flutter. We discussed the reasons for…
Getting started with Flutter can get incredibly easy and successful. Given the increasing demand and everything that is…
Adobe XD is a very fast emerging prototyping application and is making rounds in every organization, who is…
Digital disruption has taken our world by storm and there is still a lot more to explore out…