In this article, I'm going to share code that will help you to fade in and out widgets in flutter using FadeTransition widget.
This is how the output of this example is going to look like.
![](https://fluttercentral.com/Uploads/86018008-cd85-45c4-9812-969b62172fd7.gifwidth="50%height="auto](
Here is the complete code from main.dart files. You can simply copy-paste the code to try this example.
color: #4ec9b0;](_MyAnimationState();
}
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
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
color: #569cd6;](void color: #dcdcaa;](dispose() {
color: #569cd6;](super.color: #dcdcaa;](dispose();
_controller.color: #dcdcaa;](dispose();
}
color: #569cd6;](@override
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) {
_controller.color: #dcdcaa;](animateTo(color: #b5cea8;](1.0);
} color: #c586c0;](else {
_controller.color: #dcdcaa;](animateBack(color: #b5cea8;](0.0);
}
});
},
child: color: #569cd6;](const color: #4ec9b0;](Text(color: #ce9178;]('Fade In/Out'))
],
);
}
}
`
Hope this example is useful to you.
Thanks,
Sri