Reputation: 3964
i have tried many solution but i couldn't get what i want.
https://stackoverflow.com/a/56744034/4862911 i applied in this answer but couldn't get correct response. There is still shadow top of container. How can i achieve it?
and also i have tried to surround my widget with Material
. but still can't solve the problem.
Material(
elevation: 5,
child: Container(
height: 50,
child: _buildEloAndLevel(),
),
),
Upvotes: 2
Views: 7478
Reputation: 2905
I don't know if other examples are really setting a shadow for only bottom, but here is a know solution:
Container(
height: 50.0,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 20.0,
spreadRadius: -20.0,
offset: Offset(0.0, 25.0),
)
],
color: Colors.red,
),
),
Set the blur of the shadow with blurRadius
and then set the spreadRadius
to negative the blurRadius
then use the dy
property of the Offset()
constructor, you set it to positive values to control the shadow bottom.
Upvotes: 6
Reputation: 1629
All you need to do is playing around with your offset's value. And I think you don't need to wrap it with Material
.
Offset is the displacement of the shadow from the box. It requires 2 double-types values, Offset(x, y);
Example:
Container(
height: 50.0,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
offset: Offset(15.0, 20.0),
blurRadius: 20.0,
)
],
color: Colors.red,
),
),
TIPS FROM ME: To make sure the shadow doesn't show up in the top of your container, make sure your blur radius is not bigger than your Offset's y-value.
Upvotes: 1
Reputation: 1561
Material(
elevation: 5,
child: Container(
height: 50,
child: _buildEloAndLevel(),
// add boxShadow
decoration: BoxDecoration(
boxShadow: [
color: Colors.black54,
blurRadius: 15.0,
],
),
),
),
This will create a shadow
of 15 units
arounds the Container
. Now, the shadow can be moved with the offset
property. Since, we don't want shadow on top, we can move it down by 15 units
.
Material(
elevation: 5,
child: Container(
height: 50,
child: _buildEloAndLevel(),
// add boxShadow
decoration: BoxDecoration(
boxShadow: [
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0, 15), // horizontally move 0, vertically move 15,
],
),
),
),
Upvotes: 4