How to Apply Opacity and Make Any Widget Transparent in Flutter App

In this example, we are going to show you the easiest way to apply opacity on any kind of widget to make transparent in Flutter App. Opacity is an important factor in app designing and building. See the example Below:

Opacity( //Wrap any widget with Opacity()
    opacity: 0.5, //from 0-1, 0.5 = 50% opacity
    child:Container(
      height:200,
      width: 200,
      color: Colors.redAccent,
    )
)

You need to wrap widget with Opacity() widget and set opacity paramater with transparent value.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
        appBar: AppBar(
           title: Text("Apply Opacity on Widget"),
           backgroundColor: Colors.redAccent,
        ),
        body: Container(
          padding: EdgeInsets.all(20),
           child: Stack(children: [
                
                Positioned(
                  top: 30, left:50,
                  child: Container(
                     height:200,
                     width: 200,
                     color: Colors.green,
                  ),
                ),

                Positioned(
                  top: 60, left:70,
                  child: Opacity( //Wrap any widget with Opacity()
                     opacity: 0.5, //from 0-1, 0.5 = 50% opacity
                     child:Container(
                        height:200,
                        width: 200,
                        color: Colors.redAccent,
                     )
                  ),
                )

           ],)
        ),
     );
  }

}