Flutter Fade a Widget In and Out (original) (raw)

Last Updated : 23 Jul, 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

**Basic Syntax of AnimatedOpacity Widget

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
)

**Required Tools

To build this app, you need the following items installed on your machine:

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 { 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: [ 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 { 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: [ 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: