'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,
)
),
)
)
)
Solution 1:[1]
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.
Solution 2:[2]
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"),
],
),
),
),
)
Solution 3:[3]
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
Solution 4:[4]
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,
),
),
),
),
Solution 5:[5]
Screenshot:
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,
),
)
Solution 6:[6]
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,),
)
),
)
)
)
Solution 7:[7]
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),
],
),
Solution 8:[8]
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:
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:
Solution 9:[9]
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.
Solution 10:[10]
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(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
color: Colors.red,
)
),
)
)
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Raj Yadav |
| Solution 3 | |
| Solution 4 | gladimdim |
| Solution 5 | CopsOnRoad |
| Solution 6 | Zulfiqar |
| Solution 7 | jeidison farias |
| Solution 8 | |
| Solution 9 | Marcin Sza?ek |
| Solution 10 |