I am trying to add a shadow to only the right side of of my container widget using the boxShadow parameter in the BoxDecoration widget.
new Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5),
boxShadow: [
BoxShadow(
blurRadius: 5.0
),
],
),
),
This code works but adds a shadow to every possible side of the container. I would like to have it only be on the right side.
You can set the offset property of BoxShadow. It is defined as Offset(double dx, double dy). So, for example:
boxShadow: [
BoxShadow(
blurRadius: 5.0,
offset: Offset(3.0, 0),
),
],
This will cast a shadow only at 3 units to the right (dx).
Note that MyShadowSize = spreadRadius + x/y Offset. Example:
boxShadow property of BoxDecoration takes a list of BoxShadow, so you can pass solid BoxShadow to the rest of the sides and corners with background color. Note that a small shadow remains at the corners, but hey!... Life is not perfect ;)
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: Text('Shadow Test')),
body: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blueAccent,
boxShadow: [
BoxShadow(blurRadius: 8.0),
BoxShadow(color: Colors.white, offset: Offset(0, -16)),
BoxShadow(color: Colors.white, offset: Offset(0, 16)),
BoxShadow(color: Colors.white, offset: Offset(-16, -16)),
BoxShadow(color: Colors.white, offset: Offset(-16, 16)),
],
),
),
),
);
Screenshot
This is one way:
Container(
width: 230,
height: 200,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Container(
margin: EdgeInsets.only(right: 30), // ***
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 20,
spreadRadius: 8,
)
],
),
),
)
*** : whichever side you give margin to, that side will show the shadow. Giving margin to multiple sides also works.
To avoid those ugly edges from the other answers here, you can do it this.
final oneSideShadow = Padding(
padding: const EdgeInsets.only(left: 30, right: 30, top: 30),
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: borderRadius,
boxShadow: [
BoxShadow(
color: Colors.red.withOpacity(0.95),
blurRadius: 26,
offset: const Offset(0, 2), // changes position of shadow
),
],
),
),
);
return Container(
width: 200,
height: 200,
child: Stack(
children: [
oneSideShadow,
Container(
decoration: const BoxDecoration(
color: Colors.yellow,
),
),
],
),
);
You can get pretty wild results with this, e.g. if you modify the code above, and put row+expanded childs with different shadows there.