Make container background as transparent?

Question

I have a container which look like this

which has some background color. I want the list behind the container should be visible. The code written for the container is below:

 new Container(
                  margin: EdgeInsets.fromLTRB(50.0, 10.0, 50.0, 10.0),
                  width: _isTextFieldActive ? 150.0 : 80.0,
                  height: 40.0,
                  decoration: new BoxDecoration(
                      color: Color(0xFF98DAFC),
                      borderRadius: new BorderRadius.only(
                          topLeft: Radius.circular(0.0),
                          topRight: Radius.circular(32.0),
                          bottomLeft: Radius.circular(0.0),
                          bottomRight: Radius.circular(32.0))),
                  alignment: Alignment.bottomCenter,
                  child: new Row(
                    children: <Widget>[
                      new Container(
                          width: 40.0,
                          height: 40.0,
                          child: new Checkbox(value: true)),
                      new Container(
                              width: 40.0,
                              height: 40.0,
                              decoration: new BoxDecoration(
                                  color: Color(0xFFDEDEDE),
                                  borderRadius:
                                      new BorderRadius.circular(32.0)),
                              child: new IconButton(
                                icon: Icon(Icons.search),
                               );
                                  }
                                },
                              ))
                    ],
                  ),
                ),

so,i want that container without background color and the list behind the container should visible

if i remove the above code i am getting the screen as below.

Are you sure that this background is drawn by the Container whose code you provided? Could you give some more context? — , Aug 14 '18 at 09:55
@EliasProjahn yes,the backgorund is drawn by the container which i have given the code. and once check i have updated the question. — konda rahul, Aug 14 '18 at 10:22
@EliasProjahn I got it,by using flex. thank you for your support :) — konda rahul, Aug 16 '18 at 12:26
I'm glad it works now, at least after two days of trying out this and that... — , Aug 16 '18 at 12:32
Can you provide some code. How can we make Container BG color as transparent? — iPatel, Jan 10 '19 at 05:53

score 1 · Answer 1 · answered Aug 14 '18 at 12:50

1

I'm not 100% sure whether that's true, because I'm not able to test it right now, but I think the problem might be the margin property. If I understand you right, you want to have the Container in the bottom center with a bottom padding of 10dp. I would do it like that instead:

Align(
  alignment: Alignment.bottomCenter,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 10.0),
    child: Container(
      height: 40.0,
      decoration: BoxDecoration(
        color: Color(0xFF98DAFC),
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(0.0),
          topRight: Radius.circular(32.0),
          bottomLeft: Radius.circular(0.0),
          bottomRight: Radius.circular(32.0),
        ),
      ),
      child: ...,
    ),
  ),
)

answered Aug 14 '18 at 12:50

i used above code but the output is same as 1st image – konda rahul Aug 14 '18 at 13:15
I'm sorry then :-( – Aug 14 '18 at 14:04
You could try to wrap your Container in another container with transparent background. – Aug 14 '18 at 14:05
i tried with other container by wraping but result was same @EliasProjahn – konda rahul Aug 16 '18 at 05:32

Make container background as transparent?

1 Answers1

Linked