How to Add Shadow to a Widget in Flutter?

With shadow, you can give widgets a sense of depth and make them more visually appealing. Shadows can be added by using the ShadowBuilder class. There are several properties that you can customize to control the shadow’s appearance, such as its color, offset, and blur radius.

Flutter allows you to create user interfaces with beauty, fluidity, and expressiveness. In this blog post we are going to explore how you can add shadows to your widgets in Flutter.

Material(
  elevation: 5,
  child: Container(
    color: Colors.blue,
    height: 200,
    width: 200,
    child: const Text(
      "Material widget with Elevation",
      style: TextStyle(color: Colors.white),
    ),
  ),
),

Card(
  elevation: 9,
  color: Colors.redAccent,
  child: Padding(
    padding: EdgeInsets.all(8.0),
    child: SizedBox(
      height: 200,
      width: 200,
      child: Text(
        "Material widget with Elevation",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
),

Container(
  height: 200,
  width: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(12),
      topRight: Radius.circular(12),
      bottomLeft: Radius.circular(12),
      bottomRight: Radius.circular(12),
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 9,
        offset: const Offset(0, 5),
      ),
    ],
  ),
),

PhysicalModel(
  color: Colors.red,
  elevation: 12,
  shadowColor: Colors.red,
  borderRadius: BorderRadius.circular(20),
  child: const SizedBox.square(dimension: 200),
)