Flutter - Fade a Widget In and Out
Last Updated :
08 Jun, 2025
The AnimatedOpacity widget in Flutter allows you to animate the opacity (transparency) of a child widget. You can use it to smoothly fade in or out a widget. In this article, we will implement the AnimatedOpacity Widget in Flutter and explore its basic syntax.
A sample video is provided below to give you an idea of what we will cover in this article.
Demo Video
AnimatedOpacity(
duration: const Duration(milliseconds: 300), // Duration for the opacity animation
opacity: 0.5, // Opacity value (0.0 to 1.0) to control visibility
child: YourChildWidget(), // The widget you want to animate
)
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step-by-Step Implementation
Step 1: Create a new Flutter Application
Create a new Flutter application using the command Prompt. To create a new app, type the command below and run it.
flutter create app_name
To know more about it refer this article: Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all, import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here, the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class, we are going to implement the MaterialApp, Here, we are also setting the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AnimatedOpacity Example', // App title
theme: ThemeData(
primarySwatch: Colors.green, // App's primary theme color
),
debugShowCheckedModeBanner: false,
home: AnimatedOpacityExample(), // Main home page
);
}
}
Step 5: Create AnimatedOpacityExample Class
In this class, we are going to implement the AnimatedOpacity widget. Comments are added for better understanding.
AnimatedOpacity(
duration: Duration(seconds: 1), // Animation duration
opacity: _isVisible ? 1.0 : 0.0, // Opacity value based on visibility
child: Container(
width: 200,
height: 200,
color: Colors.blue, // Color of the box
child: Center(
child: Text(
'Fading Box', // Text displayed inside the box
style: TextStyle(
color: Colors.white, // Text color
fontSize: 20.0, // Text font size
),
),
),
),
),
Dart
class AnimatedOpacityExample extends StatefulWidget {
@override
_AnimatedOpacityExampleState createState() => _AnimatedOpacityExampleState();
}
class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
bool _isVisible = true; // A variable to control the visibility of the box
void _toggleVisibility() {
setState(() {
_isVisible = !_isVisible; // Toggle the visibility when the button is pressed
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedOpacity Example'), // AppBar title
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
duration: Duration(seconds: 1), // Animation duration
opacity: _isVisible ? 1.0 : 0.0, // Opacity value based on visibility
child: Container(
width: 200,
height: 200,
color: Colors.blue, // Color of the box
child: Center(
child: Text(
'Fading Box', // Text displayed inside the box
style: TextStyle(
color: Colors.white, // Text color
fontSize: 20.0, // Text font size
),
),
),
),
),
SizedBox(height: 20), // SizedBox for spacing
ElevatedButton(
onPressed: _toggleVisibility, // Call _toggleVisibility when the button is pressed
child: Text(_isVisible ? 'Hide' : 'Show'), // Button text
),
],
),
),
);
}
}
Complete Source Code
main.dart:
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AnimatedOpacity Example', // App title
theme: ThemeData(
primarySwatch: Colors.green, // App's primary theme color
),
debugShowCheckedModeBanner: false,
home: AnimatedOpacityExample(), // Main home page
);
}
}
class AnimatedOpacityExample extends StatefulWidget {
@override
_AnimatedOpacityExampleState createState() => _AnimatedOpacityExampleState();
}
class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
bool _isVisible = true; // A variable to control the visibility of the box
void _toggleVisibility() {
setState(() {
_isVisible = !_isVisible; // Toggle the visibility when the button is pressed
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedOpacity Example'), // AppBar title
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
duration: Duration(seconds: 1), // Animation duration
opacity: _isVisible ? 1.0 : 0.0, // Opacity value based on visibility
child: Container(
width: 200,
height: 200,
color: Colors.blue, // Color of the box
child: Center(
child: Text(
'Fading Box', // Text displayed inside the box
style: TextStyle(
color: Colors.white, // Text color
fontSize: 20.0, // Text font size
),
),
),
),
),
SizedBox(height: 20), // SizedBox for spacing
ElevatedButton(
onPressed: _toggleVisibility, // Call _toggleVisibility when the button is pressed
child: Text(_isVisible ? 'Hide' : 'Show'), // Button text
),
],
),
),
);
}
}
Output:
Similar Reads
Animated Widgets in Flutter The animations are considered hard work and take time to learn. Flutter made it easy with its packages. To animate the widgets without much effort, we can wrap them inside different defined animated widgets in the animate_do package. In this article, we will see how with the animate_do package we ca
4 min read
Flutter - Fading a Widget Every application needs to navigate through multiple pages and components in an application. In flutter one way to do so is to make the use of routes (ie, pages). But when there is a need to just remove a part (element) from a page, using routes becomes redundant. This is where Fading comes in. In t
3 min read
What are Widgets Available in Flutter? Flutter is a mobile app development framework that allows developers to create beautiful and responsive user interfaces with ease. This is made possible through the use of Flutter widgets, which are the building blocks of every Flutter application. In Flutter, widgets are the fundamental building bl
4 min read
Opacity Widget in Flutter The Opacity widget that makes its child partially transparent. This class colors its child into an intermediate buffer and then merges the child back into the scene partially transparent. For values of opacity other than 0.0 and 1.0, this class is relatively expensive as it needs coloring the child
2 min read
Flow Widget in Flutter The Flow widget in Flutter is a layout widget that positions children's elements in a flow along with sizing and positions its children proficiently using FlowDelegate. It allows you to create a grid-like layout where the children are positioned according to a given alignment, and they flow from one
4 min read
OffStage Widget in Flutter Flutter provides an inbuilt widget called “Offstageâ€, which is been used to hide or show any widget programmatically depending on user action/event. Offstage Widget is a widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit
4 min read