How to add elevation to a container with borderRadius

Question

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

Answer 1

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:

Answer 2

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.