Flutter - How to set Transparent Background Color in various Widget

In flutter app development sometimes we need to set background color transference, So in this post, I will share with you how to make a transparent widget in a flutter.


AppBar :

You can see in the below example we are going to set the transparent color to the Appbar.

AppBar(title: Text("Errorgram"),backgroundColor: Colors.transparent,)


Container :

You can see in the below example we are going to set the semi-transparent color of the Container.

              color: Colors.red.withOpacity(0.6),
              child: Text("Errorgram")

Here, We are using withOpacity (opacity) the method of color to set the transparent background color, Which ranges from 0-1.


Opacity : 

Using the Opacity widget we can make any widget transparent. You can see this in the below example.

              opacity: 0.7,
              child: Container(
                color: Colors.blue,
                child: Text("Errorgram")




class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  State<Errorgram> createState() => _ErrorgramState();

class _ErrorgramState extends State<Errorgram> {
  void initState() {

  Widget build(BuildContext context) {
    return SafeArea(
        bottom: false,
        child: Scaffold(
            extendBodyBehindAppBar: false,
            appBar: AppBar(title: Text("Errorgram"),backgroundColor: Colors.transparent,),
            body: Opacity(
                opacity: 0.6,
                child: Container(
                  width: double.infinity,
                  height: double.infinity,
                  color: Colors.red,
                  child: Center(
                      child: Text(
                        style: TextStyle(fontSize: 18, color: Colors.amberAccent),

I hope this post will help you.