In this article, I'm going to share you the example of how to Fadein and Fadeout using AnimatedOpactiy Widget.
Here is how the final output is going to look.
; 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(List args) { runApp(MyApp());}
color: #569cd6;](class MyApp color: #569cd6;](extends StatefulWidget { color: #569cd6;](@override _MyAppState createState() => _MyAppState();}
color: #569cd6;](class _MyAppState color: #569cd6;](extends State { color: #569cd6;](bool _visible = color: #569cd6;](true;
color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return MaterialApp( title: color: #ce9178;]("AnimatedOpacity Example", home: Scaffold( appBar: AppBar(title: Text(color: #ce9178;]('AnimatedOpacity Example'),), body: MyHomePage(visible: _visible), floatingActionButton: FloatingActionButton( child: Icon(Icons.flip), onPressed: (){ setState(() { _visible = !_visible; }); }, ), ), ); }}
color: #569cd6;](class MyHomePage color: #569cd6;](extends StatefulWidget { color: #569cd6;](final color: #569cd6;](bool visible;
color: #569cd6;](const MyHomePage({Key key, color: #569cd6;](this.visible}) : color: #569cd6;](super(key: key); color: #569cd6;](@override _MyHomePageState createState() => _MyHomePageState();}
color: #569cd6;](class _MyHomePageState color: #569cd6;](extends State { color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return Center( child: AnimatedOpacity( child: Container( child: Center(child: Text(color: #ce9178;]('Hello World')), width: color: #b5cea8;](200.0, height: color: #b5cea8;](200.0, color: Colors.green, ), duration: Duration(seconds: color: #b5cea8;](1), opacity: widget.visible ? color: #b5cea8;](1.0: color: #b5cea8;](0.0, ), ); }}
Hope this will be helpful to you.
Thanks,Srikanth