CODEWITHSUNDEEP
flutter
NIRAV PATEL
NIRAV PATEL

Reputation: 1461

border radius not apply inside container widget

Border radius not apply inside child Container. Tried with SizedBox & Stack widget. I need border view inside container.

Scaffold(
  appBar: AppBar(
    title: new Text("ListView"),
  ),
  body: Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                    color: Colors.green,
                    width: 2.0
                )
            ),
            child: Container(
              color: Colors.red,
            )
        ),
      )
  )
)

Upvotes: 74

Views: 72298

Answers (10)

Hari Prasad
Hari Prasad

Reputation: 623

decoration is painted behind the child. If you want the decoration to be applied in front of the container's child, use foregroundDecoration

Scaffold(
  appBar: AppBar(
    title: new Text("ListView"),
  ),
  body: Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Container(
            foregroundDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                    color: Colors.green,
                    width: 2.0
                )
            ),
            child: Container(
              color: Colors.red,
            )
        ),
      )
  )
)

above code paints border in front of the child container. Please note that, even with foregroundDecoration child container would still have sharp corners.

If you want the child container to have rounded corners, either you need apply borderRadius to the child container or use ClipRRect with same border radius as the parent container

Upvotes: 30

jaimin rana
jaimin rana

Reputation: 86

you have to just add these line of code clipBehavior:Clip.hardEdge,

Scaffold(
  appBar: AppBar(
    title: new Text("ListView"),
  ),
  body: Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Container(

clipBehavior:Clip.hardEdge,

            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                    color: Colors.green,
                    width: 2.0
                )
            ),
            child: Container(
              color: Colors.red,
            )
        ),
      )
  )
)

Upvotes: 3

Manabu Nakazawa
Manabu Nakazawa

Reputation: 2365

const innerRadius = 15.0;
const borderWidth = 2.0;
const borderColor = Colors.green;
const color = Colors.red;
const size = 100.0;

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(innerRadius + borderWidth),
    color: borderColor,
  ),
  padding: EdgeInsets.all(borderWidth),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(innerRadius),
    child: Container(
      color: color,
      width: size,
      height: size,
    ),
  ),
);

This is how it looks:

enter image description here

And how it works: https://codepen.io/mshibanami/pen/LYyQJXa

By the way, some answers suggest you using one Container that has decoration including border and color like this:

Container(
  width: size,
  height: size,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(innerRadius),
    border: Border.all(
      color: borderColor,
      width: borderWidth,
    ),
    color: color,
  ),
)

It's OK but not ideal because the inner color appears slightly outside the border. So when the border is close to the background color, it may stand out like this:

enter image description here

Upvotes: 10

Stewie Griffin
Stewie Griffin

Reputation: 5638

Other answers already state that you need to use ClipRRect to apply the border radius to the child widget of Container.

However, Container widget now has its clipBehaviour property to clip its child:

Container(
  // Add the line below
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15.0),
    border: Border.all(color: Colors.green, width: 2.0)),
  child: Container(
    color: Colors.red,
  ),
);

It's a good pratice to use this property rather than nest the widgets for a clean code.

Upvotes: 79

CopsOnRoad
CopsOnRoad

Reputation: 268504

Screenshot:

enter image description here

With ClipRRect (Using 2 Container)

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.black,
    child: Container(
      margin: EdgeInsets.all(8),
      color: Colors.blue,
    ),
  ),
)

Without ClipRRect (Using 1 Container)

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16),
    border: Border.all(
      color: Colors.black,
      width: 4,
    ),
    color: Colors.blue,
  ),
)

Upvotes: 7

Raj Yadav
Raj Yadav

Reputation: 10808

Try this, Use ClipRRect and nest inside another Container and now you can add non-uniform borders

Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5)],
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Container(
                        padding: EdgeInsets.all(20),
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(color: Colors.indigo, width: 5),
                          ),
                        ),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(Icons.home),
                            Text("Home"),
                          ],
                        ),
                      ),
                    ),
                  )

Upvotes: 64

gladimdim
gladimdim

Reputation: 772

Instead of

Container

widget use

ClipRRect

Before (not working):

 Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: _getAllRoundedBorderRadius(),
          ),
          child: Hero(
            tag: "CossackHero",
            child: TweenImage(
              last: AssetImage("images/background/cossack_0.jpg"),
              first: AssetImage("images/background/c_cossack_0.jpg"),
              duration: 2,
              height: height,
            ),
          ),
        ),
      ),

After:

Center(
        child: ClipRRect(
          borderRadius: getAllRoundedBorderRadius(),
          child: Hero(
            tag: "CossackHero",
            child: TweenImage(
              last: AssetImage("images/background/cossack_0.jpg"),
              first: AssetImage("images/background/c_cossack_0.jpg"),
              duration: 2,
              height: height,
            ),
          ),
        ),
      ),

Upvotes: 20

jeidison farias
jeidison farias

Reputation: 488

try

decoration: BoxDecoration(
                              gradient: new LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                stops: [0.02, 0.02],
                                colors: [Colors.red, Colors.white],
                              ),
                              borderRadius: BorderRadius.all(Radius.circular(10)),
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(color: Colors.grey, blurRadius: 5.0),
                              ],
                            ),

Upvotes: 3

Sher Ali
Sher Ali

Reputation: 5793

Replace your code with this

Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
  child: Padding(
    padding: EdgeInsets.all(15.0),
    child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            border: Border.all(
                color: Colors.green,
                width: 2.0
            )
        ),
        child: Container(
              decoration: new BoxDecoration(borderRadius: 
        BorderRadius.circular(15.0),
                        color: Colors.red,),
                    )
    ),
  )
)
)

Upvotes: 5

Marcin Szałek
Marcin Szałek

Reputation: 5069

I guess your container might just not be visible because it has no child/height/width.

Try adding some Text as a child or if you want it to expand, you can force with SizedBox.expand.

See this answer for example on borders.

Upvotes: 0

Related Questions