In this article, I'm going to share an example of AnimatedCorssFade Widget in Flutter.
Here is how the final output is going to look.
![](https://fluttercentral.com/Uploads/75c26cc9-fc27-4686-8d83-537479bf0d54.gifwidth="50%height="auto](
Below is the full code of this example from main.dart file. In order to run this project locally, all you need to do is create a project and copy paste the below code in Lib\main.dart file.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](
color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #569cd6;](void main() => runApp(MyApp());
color: #569cd6;](class MyApp color: #569cd6;](extends StatelessWidget { color: #569cd6;](final title = color: #ce9178;]('AnimatedCrossFade example';
color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return MaterialApp( title: title, home: MyHomePage(title: title,), ); }}
color: #569cd6;](class MyHomePage color: #569cd6;](extends StatefulWidget { color: #569cd6;](final String title; color: #569cd6;](const MyHomePage({Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key); color: #569cd6;](@override _MyHomePageState createState() => _MyHomePageState();}
color: #569cd6;](class _MyHomePageState color: #569cd6;](extends State { color: #569cd6;](bool _first = color: #569cd6;](true;
color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: AnimatedCrossFade( duration: color: #569cd6;](const Duration(seconds: color: #b5cea8;](1), firstChild: color: #569cd6;](const FlutterLogo(style: FlutterLogoStyle.horizontal, size: color: #b5cea8;](100.0), secondChild: color: #569cd6;](const FlutterLogo(style: FlutterLogoStyle.stacked, size: color: #b5cea8;](100.0), crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond, ) ), floatingActionButton: FloatingActionButton( child: Icon(Icons.transform), onPressed: () { setState(() { _first = !_first; }); } ), ); }}
Hope this example will be useful to you.
Thanks,Srikanth