AnimatedCrossFade Widget in Flutter

<p>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](</p> <p>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;](</p> <p>color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void main() => runApp(MyApp());</p> <p _first="!_first;">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(() ); } ), ); }} Hope this example will be useful to you. Thanks,Srikanth</p>