How can I add shadow to the widget in flutter?

In Flutter, adding a shadow to a widget can be achieved through various methods. Here, we’ll explore some of the most common ways to give your widgets a nice and subtle (or dramatic) shadow effect.

Method 1: Using BoxShadow

A Container can take a BoxDecoration which takes a boxShadow. This is one of the most straightforward methods to add a shadow to any widget. You can customize the color, spread radius, blur radius, and offset of the shadow as per your requirement.

return Container(
  margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(10)),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
)

Method 2: Using BoxShadow (more customizations)

You can customize the color, spread radius, blur radius, and offset of the shadow as per your requirement. Here’s an example:

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.red,
        blurRadius: 4,
        offset: Offset(4, 8), // Shadow position
      ),
    ],
  ),
)

Method 3: Using PhysicalModel

A PhysicalModel can be used to add a shadow effect to any widget. It takes a color and an elevation as parameters which directly influence the appearance of the shadow.

PhysicalModel(
  color: Colors.teal,
  elevation: 8,
  shadowColor: Colors.red,
  borderRadius: BorderRadius.circular(20),
  child: SizedBox.square(dimension: 100),
)

Method 4: Using Card

A Card widget has an elevation property which can be used to add a shadow effect. This is similar to using PhysicalModel, but with some additional features like a raised button-like effect.

Card(
  elevation: 8,
  shadowColor: Colors.red,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.teal,
  ),
)

Method 5: Using Material

A Material widget can be used to add a shadow effect. It takes an elevation, color, and shadowColor as parameters which can be customized as per your requirement.

Material(
  elevation: 8,
  color: Colors.teal,
  shadowColor: Colors.red,
  borderRadius: BorderRadius.circular(20),
  child: SizedBox.square(dimension: 100),
)