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),
)

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close