Flutter AnimatedCrossFade Examples

AnimatedCrossFade widget in Flutter can cross-faded between two given children and animates itself between their sizes. Basically, it provides fade transition effects between two widgets.

AnimatedCrossFade

import 'dart:math';

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isFirst = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedCrossFade'),
      ),
      body: SafeArea(
          child: Container(
              color: Colors.orange,
              child: Center(
                  child: AnimatedCrossFade(
                crossFadeState: _isFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
                duration: const Duration(seconds: 1),
                firstCurve: Curves.easeInCubic,
                secondCurve: Curves.easeInCirc,
                firstChild: Icon(Icons.arrow_circle_up, size: 100, color: Colors.white),
                secondChild: Icon(Icons.arrow_circle_down, size: 100, color: Colors.white),
              )))),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isFirst = !_isFirst;
          });

        },
        child: Icon(Icons.play_arrow, color: Colors.white),
      ),
    );
  }
}

Important Properties:

  • Widget firstChild: The child widget to be shown when crossFadeState is CrossFadeState.showFirst.
  • Widget secondChild: The child widget to be shown when crossFadeState is CrossFadeState.showSecond.
  • CrossFadeState crossFadeState: It accepts value between .CrossFadeState.showFirst and CrossFadeState.showSecond to determine which child to fade to.
  • Duration duration: Animation duration.
  • Duration reverseDuration: Reverse animation duration.

AnimatedCrossFade with layoutBuilder

layoutBuilder property is a builder for positioning the first child and the second child.

import 'dart:math';

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isFirst = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedCrossFade'),
      ),
      body: SafeArea(
          child: Container(
              color: Colors.orange,
              child: Center(
                  child: AnimatedCrossFade(
                crossFadeState: _isFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
                duration: const Duration(seconds: 1),
                firstCurve: Curves.easeInCubic,
                secondCurve: Curves.easeInCirc,
                firstChild: Icon(Icons.arrow_drop_up, size: 100, color: Colors.blue),
                secondChild: Icon(Icons.arrow_drop_down, size: 100, color: Colors.blue),
                    layoutBuilder: (Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey) {
                      return Stack(
                        fit: StackFit.loose,
                        children: <Widget>[
                          Positioned(
                            key: bottomChildKey,
                            left: 0.0,
                            top: 0.0,
                            right: 0.0,
                            child: bottomChild,
                          ),
                          Positioned(
                            key: topChildKey,
                            child: topChild,
                          )
                        ],
                      );
                    },

                  )))),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isFirst = !_isFirst;
          });

        },
        child: Icon(Icons.play_arrow, color: Colors.white),
      ),
    );
  }
}

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close