How to Use AnimatedOpacity in Flutter for Smooth Fade Effects

Use AnimatedOpacity in Flutter to animate the transparency of a widget smoothly by changing its opacity value over a set duration. Wrap the widget you want to fade inside AnimatedOpacity and update the opacity value to animate the fade effect.

Syntax

The AnimatedOpacity widget animates changes to its opacity property over a given duration. It requires a child widget to apply the fade effect.

• opacity: A double between 0.0 (fully transparent) and 1.0 (fully visible).
• duration: The time the animation takes to complete.
• child: The widget to animate.

dart

AnimatedOpacity(
  opacity: 0.5,
  duration: Duration(seconds: 1),
  child: YourWidget(),
)

Output

A widget that fades to 50% transparency over 1 second

Example

This example shows a button that toggles the opacity of a Flutter logo between fully visible and invisible with a smooth fade animation.

dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _opacity = 1.0;

  void _toggleOpacity() {
    setState(() {
      _opacity = _opacity == 1.0 ? 0.0 : 1.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('AnimatedOpacity Example')),
        body: Center(
          child: AnimatedOpacity(
            opacity: _opacity,
            duration: const Duration(seconds: 1),
            child: const FlutterLogo(size: 150),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _toggleOpacity,
          child: const Icon(Icons.flip),
        ),
      ),
    );
  }
}

Output

A Flutter app with a Flutter logo that fades in and out when the button is pressed

Common Pitfalls

• Not wrapping the widget: AnimatedOpacity must wrap the widget you want to animate; otherwise, no fade effect occurs.
• Forgetting to call setState(): Changes to opacity must be inside setState() to trigger the animation.
• Using opacity values outside 0.0 to 1.0: Values less than 0 or greater than 1 cause errors or unexpected behavior.
• Ignoring duration: Without a duration, the animation won't run smoothly.

dart

/* Wrong: opacity change without setState */
// _opacity = 0.0; // No animation triggered

/* Right: opacity change inside setState */
// setState(() {
//   _opacity = 0.0;
// });

Quick Reference

Property	Description
opacity	Double from 0.0 (transparent) to 1.0 (opaque)
duration	Animation length (e.g., Duration(seconds: 1))
child	The widget to animate
curve	Optional animation curve for easing

Property	Description
opacity	Double from 0.0 (transparent) to 1.0 (opaque)
duration	Animation length (e.g., Duration(seconds: 1))
child	The widget to animate
curve	Optional animation curve for easing

Key Takeaways

Wrap the widget you want to fade inside AnimatedOpacity and change its opacity value to animate.

Always update opacity inside setState to trigger the animation.

Use opacity values between 0.0 and 1.0 for valid fade effects.

Specify a duration to control how long the fade animation takes.

You can add a curve property to customize the animation easing.