Flutter – Fade a Widget In and Out

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 are going to implement the AnimatedOpacity Widget in Flutter and see the basic syntax of it. A sample video is given below to get an idea about what we are going to do in this article.

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:

• Visual Studio Code / Android Studio
• Android Emulator / iOS Simulator / Physical Device device.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to 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 set 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
            ),
          ],
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

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: