AnimatedSwitcher Widget Example in Flutter

<p>In this post, I'm going to share you an example on AnimatedSwitcher Widget in Flutter. By using AnimatedSwitcher, we would be able to switch between widgets as below. ![](../../../Uploads/2cf92f95-de7a-4696-91c0-76ccfc3ea003.gifwidth="50%height="auto]( You can also animate the transition style. For example, you can add ScaleTransition or RotateTransition and the outcome looks as below. ![](../../../Uploads/aa28e82c-ea70-4bc6-8517-80011524656c.gifwidth="50%height="auto]( Here is the code from main.dart file to try this example. 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;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp()); color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();} color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](Widget _myAnimatedWidget = color: #4ec9b0;](FirstWidget(); color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Material( child: color: #4ec9b0;](Column( mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.center, children: [ color: #4ec9b0;](AnimatedSwitcher( duration: color: #569cd6;](const color: #4ec9b0;](Duration(seconds: color: #b5cea8;](1), color: #6a9955;](//Enable this for ScaleTransition transitionBuilder: (color: #4ec9b0;](Widget child, color: #4ec9b0;](Animation animation) { color: #c586c0;](return color: #4ec9b0;](ScaleTransition(child: child, scale: animation,); }, color: #6a9955;](//Enable this for RotationTransition color: #6a9955;](// transitionBuilder: (Widget child, Animation animation) { color: #6a9955;](// return RotationTransition( color: #6a9955;](// child: child, color: #6a9955;](// turns: animation, color: #6a9955;](// ); color: #6a9955;](// }, child: _myAnimatedWidget, ), color: #4ec9b0;](RaisedButton( child: color: #4ec9b0;](Text(color: #ce9178;]('Click here'), onPressed: () { color: #dcdcaa;](setState(() { _myAnimatedWidget = (_myAnimatedWidget.color: #dcdcaa;](toString() == color: #ce9178;]("FirstWidget") ? color: #4ec9b0;](SecondWidget() : color: #4ec9b0;](FirstWidget(); }); }, ) ]), ), ); }} color: #569cd6;](class color: #4ec9b0;](FirstWidget color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](Container( width: color: #b5cea8;](200.0, height: color: #b5cea8;](200.0, child: color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]("This is First Widget")), decoration: color: #4ec9b0;](BoxDecoration( color: color: #4ec9b0;](Colors.orange, ), ); }} color: #569cd6;](class color: #4ec9b0;](SecondWidget color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](Container( width: color: #b5cea8;](200.0, height: color: #b5cea8;](200.0, child: color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]("This is Second Widget")), decoration: color: #4ec9b0;](BoxDecoration( color: color: #4ec9b0;](Colors.green, ), ); }}</p> <p>Thanks,Srikanth</p>