AnimatedCrossFade Widget – Flutter Widget Guide By Flutter Agency

Earlier we have been through AnimatedBuilder Widget which is basically used for building animation through the application so now in this article we will go through AnimatedCrossFade Widget for example.

What is AnimatedCrossFade Widget in Flutter?

AnimatedCrossFade Widget is a Widget that crossfades between two children and animates itself between size.

Default Constructor for it will look like below:

AnimatedCrossFadeWidget({
  Key key,
  @required Widget firstChild,
  @required Widget secondChild,
  Curve firstCurve: Curves.linear,
  Curve secondCurve: Curves.linear,
  Curve sizeCurve: Curves.linear,
  AlignmentGeometry alignment: Alignment.topCenter,
  @required CrossFadeState crossFadeState,
  @required Duration duration,
  Duration reverseDuration,
  AnimatedCrossFadeBuilder layoutBuilder: defaultLayoutBuilder,
});

In the Above constructor, all fields marked with @required must not be empty.

Properties:

Key key: key represents how one widget should replace another widget in a tree.
Widget firstChild: The child that is visible when crossFadeState is CrossFadeState.showFirst. It fades out when transitioning crossFadeState from CrossFadeState.showFirst to CrossFadeState.showSecond and vice versa.
Widget secondChild: The child that is visible when crossFadeState is CrossFadeState.showFirst. It fades out when transitioning crossFadeState from CrossFadeState.showFirst to CrossFadeState.showSecond and vice versa.
Curve firstCurve: The fade curve of the first child. The default value will be Curves.linear.
Curve secondCurve: The fade curve of the second child. The defaults to Curves.linear.
Curve sizeCurve: The curve of the animation between the two children’s sizes. The defaults to Curves.linear.
AlignmentGeometry alignment: Alignment Properties define how the children should be aligned while the size is animating.
CrossFadeState crossFadeState: It is the child that will be shown when the animation has completed.
Duration duration: The duration of the whole orchestrated animation.
Duration reverseDuration: The duration of the whole orchestrated animation when running in a reverse direction.
AnimatedCrossFadeBuilder layoutBuilder: A builder that positions the firstChild and secondChild widgets. The widget returned by this method is wrapped in an AnimatedSize. By default, this uses AnimatedCrossFade.defaultLayoutBuilder, which uses a Stack Widget and aligns the bottomChild to the top of the stack while providing the topChild as the non-positioned child to fill the provided constraints. This works well when the AnimatedCrossFade is in a position to change the size and when the children are not flexible. However, if the children are less fussy about their sizes. For example, a CircularProgressIndicator inside a Center, or if the AnimatedCrossFade is being forced to a particular size, then it can result in the widgets jumping about when the cross-fade state is changed.

How to use AnimatedCrossFade Widget in Flutter?

The following code snippet tells us how to implement AnimatedCrossFade Widget in Flutter.

class AnimatedCrossFadeWidget extends StatefulWidget {
  @override
  _AnimatedCrossFadeWidgetState createState() =>
      _AnimatedCrossFadeWidgetState();
}

class _AnimatedCrossFadeWidgetState extends State {
  CrossFadeState _crossFadeState = CrossFadeState.showFirst;
  @override
  void initState() {
    super.initState();

    Future.delayed(
        const Duration(
          seconds: 3,
        ), () {
      setState(() {
        _crossFadeState = CrossFadeState.showSecond;
      });
    });

    Future.delayed(
        const Duration(
          seconds: 5,
        ), () {
      setState(() {
        _crossFadeState = CrossFadeState.showFirst;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedCrossFade(
        crossFadeState: _crossFadeState,
        duration: const Duration(
          seconds: 2,
        ),
        reverseDuration: const Duration(
          seconds: 3,
        ),
        firstCurve: Curves.bounceInOut,
        secondCurve: Curves.easeInBack,
        firstChild: const Icon(
          Icons.text_rotate_up,
          size: 100,
        ),
        secondChild: const Icon(
          Icons.text_rotate_vertical,
          size: 200,
        ),
        layoutBuilder: (
          Widget topChild,
          Key topChildKey,
          Widget bottomChild,
          Key bottomChildKey,
        ) {
          return Stack(
            children: [
              Positioned(
                key: bottomChildKey,
                left: 100.0,
                top: 100.0,
                child: bottomChild,
              ),
              Positioned(
                key: topChildKey,
                child: topChild,
              ),
            ],
          );
        },
      ),
    );
  }
}

Our Output will look like below:

Conclusion

So in this article, we have been through What is AnimatedCrossFade Widget in Flutter. With how to implement it in a Flutter.

Thanks for reading !!! Need Support for Flutter Developer? We are here for you 🙂

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter such as Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.