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.

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(
              opacity: 0.7,
              child: Container(
                color: Colors.blue,
                child: Text("Errorgram")

              ),
            )

 

Full-Example:


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

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  void initState() {
    super.initState();
  }

  @override
  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(
                        "Errorgram",
                        style: TextStyle(fontSize: 18, color: Colors.amberAccent),
                      )),
                ))));
  }
}

I hope this post will help you.

Tags: