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.
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.
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
),
),
),
),
),
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
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
),
],
),
),
);
}
} |