Skip to content
Related Articles
Open in App
Not now

Related Articles

Opacity Widget in Flutter

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 20 Jul, 2022
Improve Article
Save Article

The Opacity widget that makes its child partially transparent. This class colors its child into an intermediate buffer and then merges the child back into the scene partially transparent. For values of opacity other than 0.0 and 1.0, this class is relatively expensive as it needs coloring the child into an intermediate buffer. For the value 0.0, the child is simply not colored at all. For the value 1.0, the child is colored without an intermediate buffer.


Opacity({Key key,
@required double opacity, 
bool alwaysIncludeSemantics: false, 
Widget child})


  • child: The widgets below this widget in the tree.
  • hashCode: The hash code for this object.
  • key: Controls how one widget replaces another widget in the tree.
  • runtimeType: A representation of the runtime type of the object.
  • opacity: The fraction to scale the child’s alpha value.


The image in the below app has 0.5 opacity.


import 'package:flutter/material.dart';
void main() {
class MyApp extends StatelessWidget {
  // This widget is
  //the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipOval',
      theme: ThemeData(
      home: MyHomePAGE(),
      debugShowCheckedModeBanner: false,
class MyHomePAGE extends StatefulWidget {
  _MyHomePAGEState createState() => _MyHomePAGEState();
class _MyHomePAGEState extends State<MyHomePAGE> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
      body: Center(
              color: Color.fromRGBO(255, 255, 255, 0.5),
              colorBlendMode: BlendMode.modulate
      backgroundColor: Colors.lightBlue[50],
class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  bool shouldReclip(oldClipper) {
    return false;



  1. First initialize the main app as a stateless widget.
  2. Second design the main widget as you desire.
  3. Build the Appbar with the scaffold widget.
  4. Now use the Image.Network widget inside the body of the scaffold widget.
  5. Finally, set the opacity using colorBlendMode.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!