menu

  1. [ Flutter ](index.html)
  2. [ widgets.dart ](widgets/widgets-library.html)
  3. AnimatedCrossFade class 

AnimatedCrossFade

brightness_4  brightness_5

[ description
](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/animated_cross_fade.dart#L112
"View source code")

#  AnimatedCrossFade  class

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

The animation is controlled through the [ crossFadeState
](widgets/AnimatedCrossFade/crossFadeState.html) parameter. [ firstCurve
](widgets/AnimatedCrossFade/firstCurve.html) and [ secondCurve
](widgets/AnimatedCrossFade/secondCurve.html) represent the opacity curves of
the two children. The [ firstCurve
](widgets/AnimatedCrossFade/firstCurve.html) is inverted, i.e. it fades out
when providing a growing curve like [ Curves.linear ](animation/Curves/linear-
constant.html) . The [ sizeCurve ](widgets/AnimatedCrossFade/sizeCurve.html)
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
](widgets/AnimatedCrossFade-class.html) is rebuilt with a different value for
the [ crossFadeState ](widgets/AnimatedCrossFade/crossFadeState.html)
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 ](widgets/AnimatedCrossFade-class.html) widget cross-fades
between the two forms of the logo over three seconds.

_link_

_content_copy_

    
    
    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,
    )

See also:

  * [ AnimatedOpacity ](widgets/AnimatedOpacity-class.html) , which fades between nothing and a single child. 
  * [ AnimatedSwitcher ](widgets/AnimatedSwitcher-class.html) , which switches out a child for a new one with a customizable transition, supporting multiple cross-fades at once. 
  * [ AnimatedSize ](widgets/AnimatedSize-class.html) , the lower-level widget which [ AnimatedCrossFade ](widgets/AnimatedCrossFade-class.html) uses to automatically change size. 

Inheritance

    

  * [ Object ](dart-core/Object-class.html)
  * [ DiagnosticableTree ](foundation/DiagnosticableTree-class.html)
  * [ Widget ](widgets/Widget-class.html)
  * [ StatefulWidget ](widgets/StatefulWidget-class.html)
  * AnimatedCrossFade 

##  Constructors

[ AnimatedCrossFade ](widgets/AnimatedCrossFade/AnimatedCrossFade.html) (  {
[ Key ](foundation/Key-class.html) ?  key  ,  required  [ Widget
](widgets/Widget-class.html) firstChild  ,  required  [ Widget
](widgets/Widget-class.html) secondChild  ,  [ Curve ](animation/Curve-
class.html) firstCurve  =  Curves.linear  ,  [ Curve ](animation/Curve-
class.html) secondCurve  =  Curves.linear  ,  [ Curve ](animation/Curve-
class.html) sizeCurve  =  Curves.linear  ,  [ AlignmentGeometry
](painting/AlignmentGeometry-class.html) alignment  =  Alignment.topCenter  ,
required  [ CrossFadeState ](widgets/CrossFadeState.html) crossFadeState  ,
required  [ Duration ](dart-core/Duration-class.html) duration  ,  [ Duration
](dart-core/Duration-class.html) ?  reverseDuration  ,  [
AnimatedCrossFadeBuilder ](widgets/AnimatedCrossFadeBuilder.html)
layoutBuilder  =  defaultLayoutBuilder  ,  [ bool ](dart-core/bool-class.html)
e