Flutter CrosssFade Animation Example

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:

Below is the full source code:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new AnimatedCrossFadeExample("Animated Crossfrade Demo")
  ));
}
class AnimatedCrossFadeExample extends StatefulWidget {
  final String title;

  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: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              FlatButton(
                  onPressed: () {
                    setState(() {
                      _first = !_first;
                    });
                  },
                  child: Text("Animate")),
              AnimatedCrossFade(
                sizeCurve: ElasticOutCurve(),
                firstCurve: Curves.decelerate,
                secondCurve: Curves.decelerate,
                duration: const Duration(seconds: 3),
                firstChild: const FlutterLogo(
                    style: FlutterLogoStyle.horizontal, size: 100.0),
                secondChild: const FlutterLogo(
                    style: FlutterLogoStyle.markOnly, size: 100.0),
                crossFadeState: _first
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

How to run

This is a dead simple example. All you need to do is:

  1. Copy the above code and paste it into your main.dart file.

That’s it, then run.

CREDIT: This example was created by @ibhavikmakwana from Github.

Good day.

Share



Share an Example

Share an Example

Browse
What is the capital of Egypt? ( Cairo )