Flutter – AnimatedCrossFade Widget

AnimatedCrossFade Widget creates a fade transition between two widgets when one widget is replaced by another. It is used when you need to give a fade kind of transition in between two widgets. It supports any kind of Flutter Widget like Text, Images, Icon as well as anything that is extended from the widget in Flutter. Also, it allows you to change the animation as well as the duration of the animation. A sample GIF is given below to get an idea about what we are going to do in this article.

Constructor

AnimatedCrossFade
    ({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
})

Properties

• alignment: How the children should be aligned while the size is animating.  
• crossFadeState: The child that will be shown when the animation has been completed.
• duration: The duration of the whole orchestrated animation.
• 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.
• firstCurve: The fade curve of the first child.
• hashCode: The hash code for this object. 
• key: Controls how one widget replaces another widget in the tree.
  layoutBuilderA builder that positions the firstChild and secondChild widgets. 
• reverseDuration: The duration of the whole orchestrated animation when running in reverse. 
• runtimeType: A representation of the runtime type of the object.
• secondChild: The child that is visible when crossFadeState is CrossFadeState.showSecond. It fades in when transitioning crossFadeState from CrossFadeState.showFirst to CrossFadeState.showSecond and vice versa.
• secondCurve: The fade curve of the second child.
• sizeCurve: The curve of the animation between the two children’s sizes. 

Note: firstChild and secondChild have required keywords applied which means these parameters are mandatory to use.

Example

The main.dart file.

Dart

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GFG(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class GFG extends StatefulWidget {
  const GFG({Key? key}) : super(key: key);

  @override
  State<GFG> createState() => _GFGState();
}

class _GFGState extends State<GFG> with TickerProviderStateMixin {
  late AnimationController _controller;
  bool _bool = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        actions: [
          // Creating a button to
          // switch between two widgets
          TextButton(
            onPressed: () {
              setState(
                () {
                  _bool = !_bool;
                },
              );
            },
            child: Text("Switch", style: TextStyle(color: Colors.white)),
          ),
        ],
      ),
      body: Center(
        child: AnimatedCrossFade(
            // First widget
            firstChild: Container(
              height: 230,
              width: 250,
              color: Colors.blue,
            ),
            // Second widget
            secondChild: Container(
              height: 250,
              width: 230,
              color: Colors.green,
            ),
            // Parameter to change between two
            // widgets on this basis of value of _bool
            crossFadeState:
                _bool ? CrossFadeState.showFirst : CrossFadeState.showSecond,
            // Duration for crossFade animation.
            duration: Duration(seconds: 1)),
      ),
    );
  }
}

Note: The firstChild and secondChild can be any widget as long as they extend the class Widget.

Output: