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 ), ],
Code language: JavaScript (javascript)

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 ), ], ), ),
Code language: JavaScript (javascript)
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, ), )
Code language: CSS (css)
Flutter Shadow Example

You can change shadow size by changing elevation property value.

Also read, Show/hide widgets programmatically.