How to Add shadow to the widget in Flutter

To complete Mobile app UI design shadows takes someplace. In Flutter adding shadows to the widget is very easy. There are some ways we can achieve shadow in widgets. In this Tutorial, we see the two methods.

Using Container Widget
Using Card Widget

1. Using Container Widget

The Container widget is one of the popular widgets in the flutter. As you know the Container widget has the decoration property. The decoration property takes the BoxShadow.

BoxShadow Example,

boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],

Full Container Widget example,

Container(
          margin:
              const EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
          height: MediaQuery.of(context).size.height / 2,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5), //shadow color
                spreadRadius: 5, // spread radius
                blurRadius: 7, // shadow blur radius
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
        ),

How to Add shadow to the widget in Flutter — Flutter BoxShadow Example

You can change the shadow position by changing the offset value. Also, you can change the shadow color, blur radius, spread radius.

Next, we will see the second method.

2. Using Card Widget

Using the card widget is a very easy approach. For example,

        Card(
          elevation: 8,
          shadowColor: Colors.blue,
          child: Container(
            width: 300,
            height: 200,
            color: Colors.blue,
          ),
        )