I want to add a shadow to a ClipRRect in Flutter. I want it to look like this:
But when I try building it I get something like this:
The shadow is going across the whole box instead of the ClipRRect area. Here is my code:
Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Color(0x54000000),
spreadRadius: 10,
blurRadius: 2,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(250)),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
end: Alignment.bottomCenter,
begin: Alignment.topCenter,
colors: [
Theme.of(context).primaryColor,
Color(0xff995DFF)
])),
height: 500,
width: MediaQuery.of(context).size.width,
),
),
)
],
)
Somehow the shadow needs to be just on the ClipRRect. Thanks for any help
Solution 1: Renê Guilherme Nucci
This happens because the container that has shadown is a rect as default shape...
An option is put BorderRadius
in decoration of container father like this:
Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
//Here goes the same radius, u can put into a var or function
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(250)),
boxShadow: [
BoxShadow(
color: Color(0x54000000),
spreadRadius:4,
blurRadius: 20,
),
],
),
child: ClipRRect(
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(250)),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
end: Alignment.bottomCenter,
begin: Alignment.topCenter,
colors: [
Theme.of(context).primaryColor,
Color(0xff995DFF)
],
),
),
height: 500,
width: MediaQuery.of(context).size.width,
),
),
)
],
),