Blog

Learn about cross fade animations by looking at the following open source example.

Example 1: Crossfade Animation

Learn about cross fade animations by looking at the following open source example. The example animates a simple image using cross fade animations. AnimatedCrossFade is the class used and it is already present in the material.dart package. Several parameters will need to be passed to it like size curve, first curve, secpnd curve, duration and children.

Demo
Check the demo below:

This is an AnimatedCrossfade example, it will comprise the following files:

• animated_cross_fade.dart

Step 1: Create Project.

1. Open your favorite Flutter IDE.
2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies.

No extenal dependency is needed.

Step 4: Write Dart Code

Write your code as follows:

*(a). animated_cross_fade.dart

Create a file Dart named animated_cross_fade.dart

Here is the full code

import 'package:flutter/material.dart';
class AnimatedCrossFadeExample extends StatefulWidget {
  final String title;
  const AnimatedCrossFadeExample(this.title);
  @override
  _AnimatedCrossFadeExampleState createState() =>
      _AnimatedCrossFadeExampleState();
}
class _AnimatedCrossFadeExampleState extends State<AnimatedCrossFadeExample> {
  bool _first = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            TextButton(
                onPressed: () {
                  setState(() {
                    _first = !_first;
                  });
                },
                child: const Text("Click")),
            AnimatedCrossFade(
              sizeCurve: const ElasticOutCurve(),
              firstCurve: Curves.decelerate,
              secondCurve: Curves.decelerate,
              duration: const Duration(seconds: 3),
              firstChild: const FlutterLogo(
                  style: FlutterLogoStyle.horizontal, size: 100.0),
              secondChild: const FlutterLogo(size: 100.0),
              crossFadeState:
                  _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
            ),
          ],
        ),
      ),
    );
  }
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.