How to use opacity widget in Flutter
The Opacity widget in Flutter allows you to control the transparency of its child elements. We can create various visual effects and animations by adjusting the opacity value from 0.0 (completely transparent) to 1.0 (fully opaque). This Answer explores how to use the opacity widget in Flutter, including code examples and explanations.
Constructor and parameters
The Opacity widget provides a constructor with various parameters to customize its behavior and layout.
const Opacity({
Key? key,
required double opacity,
bool alwaysIncludeSemantics = false,
Widget? child
})
Let's take a closer look at each parameter and its purpose:
key: An optional key to uniquely identify the Opacity widget.opacity: The opacity value, ranging from 0.0 (fully transparent) to 1.0 (fully opaque), controls the transparency of the child widget.alwaysIncludeSemantics: Whether to always include the semantics of the child widget, even if it's fully transparent.child: The child widget will be transparent according to the specified opacity value.
Importing necessary libraries
Before using the Opacity widget, make sure to import the required libraries in your Dart file:
import 'package:flutter/material.dart';
Using the Opacity
The Opacity widget can wrap any other widget, adjusting its transparency according to the provided opacity value. Here's the basic syntax of the opacity widget:
Opacity(opacity: 0.5, // Set the opacity value between 0.0 (fully transparent) to 1.0 (fully opaque).child: YourChildWidget(), // The widget that you want to make transparent.)
Using Opacity with Image
In this below example, we use the Opacity widget to wrap an Image widget. The image will appear semi-transparent by setting the opacity to 0.5 (50%). We can change the opacity value to achieve different image transparency effects.
Opacity(opacity: 0.5, // Set the opacity value here (0.0 to 1.0).child: Image.network('https://www.kindacode.com/wp-content/uploads/2020/11/my-dog.jpg', // Replace with your image URL.height: 200,width: 200,fit: BoxFit.cover,),),
After running the above code, we can see the following output:
Different levels of Opacity
In the code below, we will use Opacity widget to show different levels of opacity of the same container.
Scaffold(appBar: AppBar(title: const Text('Educative Opacity Answer'),),body: Column(children: [// Opacity = 1Opacity(opacity: 1,child: Container(width: double.infinity,height: 160,color: Colors.blue,alignment: Alignment.center,child: const Text('Opacity = 1'),)),// Opacity = 0.6Opacity(opacity: 0.6,child: Container(width: double.infinity,height: 150,color: Colors.blue,alignment: Alignment.center,child: const Text('Opacity = 0.6'),)),// Opacity = 0.3Opacity(opacity: 0.3,child: Container(width: double.infinity,height: 150,color: Colors.blue,alignment: Alignment.center,child: const Text('Opacity = 0.3'),)),// This one takes place but it's invisibleOpacity(opacity: 0,child: Container(width: double.infinity,height: 150,color: Colors.blue,alignment: Alignment.center,child: const Text('Opacity = 0'),)),],));
After running the above code, we can see the following output:
Code example
We get the following output by putting together the code explained above.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Educative Opacity Answer'),
),
body: Column(
children: [
// Opacity = 1
Opacity(
opacity: 1,
child: Container(
width: double.infinity,
height: 160,
color: Colors.blue,
alignment: Alignment.center,
child: const Text('Opacity = 1'),
)),
// Opacity = 0.6
Opacity(
opacity: 0.6,
child: Container(
width: double.infinity,
height: 150,
color: Colors.blue,
alignment: Alignment.center,
child: const Text('Opacity = 0.6'),
)),
// Opacity = 0.3
Opacity(
opacity: 0.3,
child: Container(
width: double.infinity,
height: 150,
color: Colors.blue,
alignment: Alignment.center,
child: const Text('Opacity = 0.3'),
)),
// This one takes place but it's invisible
Opacity(
opacity: 0,
child: Container(
width: double.infinity,
height: 150,
color: Colors.blue,
alignment: Alignment.center,
child: const Text('Opacity = 0'),
)),
],
)
),
);
}
}
Conclusion
The Opacity widget in Flutter is a powerful tool to create stunning visual effects and animations by controlling the transparency of child elements. Following the steps and examples in this Answer, we can easily use the Opacity widget in our Flutter applications and make our UI more dynamic and engaging.
Free Resources
