CODEWITHSUNDEEP
flutterflutter-layoutflutter-web
Franken Frank
Franken Frank

Reputation: 85

Child container doesn't cover parent container entirely, leaving a tiny padding

I'm trying to make a container with only 1 colored border by nesting 2 containers inside one another. It worked but somehow the child container doesn't cover the part it's supposed to entirely. Also, I don't know if it matters, but this is on flutter web

My code:

@override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 5.0, right: 0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(3.0),
        color: Colors.teal,
        boxShadow: [
          BoxShadow(
             color: Color.fromRGBO(162, 181, 183, 0.3),
             spreadRadius: 2,
             blurRadius: 30,
             offset: Offset(-1, -1), 
          ),
        ],
      ),
      child: Container(
        padding: const EdgeInsets.fromLTRB(20.0, 10.0, 30.0, 15.0),
        margin: EdgeInsets.zero,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(3.0),
            bottomRight: Radius.circular(3.0),
          ),
          color: Colors.white,
        ),
        child: SomeWidget(),
      ),
    );
  }
}

What I got:

enter image description here

What I want:

enter image description here

Basically I want to remove that tiny padding on the right that is revealing the background color of the parent container.

Upvotes: 0

Views: 1297

Answers (3)

Olga
Olga

Reputation: 669

I am very confused of how this question has gotten some answers and accepted one currently is to use Container inside of a Container with padding inside of a ClipRRect, while you only needed one container to create one sided border.

 Container(
                  decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(
                        color: Colors.teal,
                        width: 3.0,
                      ),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Color.fromRGBO(162, 181, 183, 0.3),
                        spreadRadius: 2,
                        blurRadius: 30,
                        offset: Offset(-1, -1),
                      ),
                    ],
                  ),
                  child:  someWidget
                ),

Other thing is that you can give a BorderRadius only to a unified border. If you need this, then use ClipRRect.

Also note that accepted answer suggests using ClipRRect on top of other widgets, so it clips everything outside of it, thus it will ruin container's shadow.

To wrap up for all elements that you wanted to have, you need: container with shadow -> cliprrect -> container with one side border -> child widget

Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Color.fromRGBO(162, 181, 183, 0.3),
                spreadRadius: 2,
                blurRadius: 30,
                offset: Offset(-1, -1),
              ),
            ],
    ),
          child: ClipRRect(
            borderRadius:  BorderRadius.circular(5.0),
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  left: BorderSide(
                    color: Colors.teal,
                    width: 3.0,
                  ),
                ),

              ),
              child:  Container(height: 200, width: 100, color: Colors.white),
            ),
          ),
        ),

Upvotes: 3

Nytrotech Fatima
Nytrotech Fatima

Reputation: 11

You can use this:

ClipRRect(
            borderRadius: BorderRadius.circular(3.0),
            child: Container(
              padding: const EdgeInsets.only(left: 5.0),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                  left: BorderSide(
                      color: Colors.teal,
                      width: 10),
                ),
                // color: Colors.teal,
                boxShadow: [
                  BoxShadow(
                    color: Color.fromRGBO(162, 181, 183, 0.3),
                    spreadRadius: 2,
                    blurRadius: 30,
                    offset: Offset(-1, -1),
                  ),
                ],
              ),
              child: Container(
                padding: const EdgeInsets.fromLTRB(20.0, 10.0, 00.0, 15.0),
                margin: EdgeInsets.zero,
                decoration: BoxDecoration(
                  // borderRadius: BorderRadius.circular(3.0),

                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(3.0),
                    bottomRight: Radius.circular(3.0),
                  ),
                  color: Colors.white,
                ),
                child: Container(),
              ),
            ),
          )

Upvotes: 2

imperial-lord
imperial-lord

Reputation: 651

Make use of a Row() widget to place the thin blue line and the white Container() side by side. That should serve your purpose. You can make use of a Divider() widget for the thin blue line too.

Another way is to make use of Stack, and put those two containers on top of each other. You can specify the positions for both containers and thus there won't be any padding issues.

Upvotes: 0

Related Questions