Cross fade is a cinematic term in which one thing gradually fades into another. Wouldn’t it be useful to have something similar, but for Flutter widgets? AnimatedCrossFade to the rescue!

What is AnimatedCrossFade class

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

The animation is controlled through the crossFadeState parameter. firstCurve and secondCurve represent the opacity curves of the two children. The firstCurve is inverted, i.e. it fades out when providing a growing curve like Curves.linear. The sizeCurve is the curve used to animate between the size of the fading-out child and the size of the fading-in child.

This widget is intended to be used to fade a pair of widgets with the same width. In the case where the two children have different heights, the animation crops overflowing children during the animation by aligning their top edge, which means that the bottom will be clipped.

The animation is automatically triggered when an existing AnimatedCrossFade is rebuilt with a different value for the crossFadeState property.

This code fades between two representations of the Flutter logo. It depends on a boolean field _first; when _first is true, the first logo is shown, otherwise the second logo is shown. When the field changes state, the AnimatedCrossFade widget cross-fades between the two forms of the logo over three seconds.

AnimatedCrossFade(
  duration: const Duration(seconds: 3),
  firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
  secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
  crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)

#flutter