FadeTransition example - fade in and out.

<p>In this article, I'm going to share code that will help you to fade in and out widgets in flutter using FadeTransition widget.</p> <p>This is how the output of this example is going to look like.</p> <p>![](https://fluttercentral.com/Uploads/86018008-cd85-45c4-9812-969b62172fd7.gifwidth="50%height="auto](</p> <p>Here is the complete code from main.dart files. You can simply copy-paste the code to try this example.</p> <p>color: #4ec9b0;](_MyAnimationState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyAnimationState color: #569cd6;](extends color: #4ec9b0;](State color: #569cd6;](with color: #4ec9b0;](SingleTickerProviderStateMixin { color: #569cd6;](late color: #4ec9b0;](AnimationController _controller; color: #569cd6;](late color: #4ec9b0;](Animation _animation; color: #4ec9b0;](double value = color: #b5cea8;](1.0; color: #569cd6;](@override</p> <p>color: #569cd6;](void color: #dcdcaa;](initState() { color: #569cd6;](super.color: #dcdcaa;](initState(); _controller = color: #4ec9b0;](AnimationController( duration: color: #569cd6;](const color: #4ec9b0;](Duration(milliseconds: color: #b5cea8;](500), vsync: color: #569cd6;](this); _animation = color: #4ec9b0;](Tween( begin: color: #b5cea8;](1.0, end: color: #b5cea8;](0.0, ).color: #dcdcaa;](animate(color: #4ec9b0;](CurvedAnimation(parent: _controller, curve: color: #4ec9b0;](Curves.easeIn)); } color: #569cd6;](@override</p> <p id="dcdcaa;](dispose();" color:="" _controller.color:=>color: #569cd6;](void color: #dcdcaa;](dispose() color: #569cd6;](@override</p> <p id="b5cea8;](0.0);" _controller.color:=>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](Column( mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.center, children: [ color: #4ec9b0;](FadeTransition( opacity: _animation, child: color: #569cd6;](const color: #4ec9b0;](FlutterLogo( size: color: #b5cea8;](100.0, ), ), color: #569cd6;](const color: #4ec9b0;](SizedBox( height: color: #b5cea8;](20.0, ), color: #4ec9b0;](ElevatedButton( onPressed: () { color: #dcdcaa;](setState(() { value = value == color: #b5cea8;](1 ? color: #b5cea8;](0 : color: #b5cea8;](1; color: #c586c0;](if (value == color: #b5cea8;](0) color: #c586c0;](else }); }, child: color: #569cd6;](const color: #4ec9b0;](Text(color: #ce9178;]('Fade In/Out')) ], ); } } `</p> <p>Hope this example is useful to you.</p> <p>Thanks, Sri</p>