How to add elevation to a container with borderRadius
I have tried Material/elevation and ClipRRect.showBox but it doesn't look as good as regular elevation
CodePudding user response:
You can use a Container with boxShadow and borderRadius like that for example:
Container(
width: 200,
height: 100,
decoration: const BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(
Radius.circular(15.0),
),
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
blurRadius: 2,
spreadRadius: 2,
color: Colors.black26,
),
],
),
);
It will look something like that:
You can play with the shadows to achieve the elevation you want.
CodePudding user response:
Add BoxShadow with grey shadow color, it will give an elevation effect.
Container(
height: 200, /// Change height and width as per your need.
width: 200,
child: Container(
color: Colors.red
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Output: