How to create a transparent container in flutter

Question

I want to make a container transparent like this:

Here's the container code:

: Container(child: Column(
    children: [
             Container(child: Text('Address: '), alignment: Alignment.centerLeft,),
             Divider(color: Colors.grey,),
             Container(child: Text('$address'), alignment: Alignment.centerLeft,),
             ],
            ),
   color: Color(0xFF005D6C),
   );

If I give color: Color(0xFF005D6C).withOpacity(0.5) then, it is just making the color light like this

How can I make the container transparent?

score 3 · Answer 1 · answered Feb 06 '21 at 16:15

3

try wrapping it inside the Opacity Widget

Opacity(
  opacity: 0.5,
  child: Container(child: Column(
    children: [
             Container(child: Text('Address: '), alignment: Alignment.centerLeft,),
             Divider(color: Colors.grey,),
             Container(child: Text('$address'), alignment: Alignment.centerLeft,),
             ],
            ),
   color: Color(0xFF005D),
   ),
)

answered Feb 06 '21 at 16:15

pedro pimont

2,764
1
11
24

Now the container's background color is not coming. – shalu j Feb 06 '21 at 16:17
do you have some kind of image in the background? because if you just have a white background below, the color will just appear to be lighter – pedro pimont Feb 06 '21 at 16:21
Currently, I don't have any background image. – shalu j Feb 06 '21 at 16:23
So thats probably the problem... Try adding something to the background and it'll be easier to se if your container got transparent – pedro pimont Feb 06 '21 at 16:24
I have given white color to the background, So, if I am giving green color to the container with some opacity, it should make the container transparent – shalu j Feb 06 '21 at 16:26

score 2 · Answer 2 · answered Feb 06 '21 at 16:45

Try using Colors.transparent + withOpacity for Container.

Container(
  color: Colors.transparent.withOpacity(0.5),
  child: Column(
    children: [
      Container(
        child: Text('Address: '),
        alignment: Alignment.centerLeft,
      ),
      Divider(
        color: Colors.grey,
      ),
      Container(
        child: Text('$address'),
        alignment: Alignment.centerLeft,
      ),
   ],
),

How to create a transparent container in flutter

2 Answers2

Linked