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:

How to apply Opacity on Any Widget:

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.

Full Code Example:

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,
                     )
                  ),
                )

           ],)
        ),
     );
  }

}

Output Screenshot:

In this way you can make any widget transparent by appling opacity in Flutter widget.

No any Comments on this Article


Please Wait...