How to set Box Shadow on Container Widget in Flutter App

The beautiful UI of the app is the key to make a good impression with users. While making beautiful UI, the box-shadow property is very important during designing. See the example below and learn how to apply a box-shadow on the Container widget of Flutter.

To apply box shadow, use the following code:

BoxShadow(
   color: Colors.grey.withOpacity(0.5), //color of shadow
   spreadRadius: 5, //spread radius
   blurRadius: 7, // blur radius
   offset: Offset(0, 2), // changes position of shadow
   //first paramerter of offset is left-right
   //second parameter is top to down
)

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class ContainerStyle extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar( 
         title: Text("Beautiful Container Shadow"),
         backgroundColor: Colors.redAccent,
       ),
       body:Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(20),
          height: 200,
          width:double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
             borderRadius: BorderRadius.circular(30), //border corner radius
             boxShadow:[ 
               BoxShadow(
                  color: Colors.grey.withOpacity(0.5), //color of shadow
                  spreadRadius: 5, //spread radius
                  blurRadius: 7, // blur radius
                  offset: Offset(0, 2), // changes position of shadow
                  //first paramerter of offset is left-right
                  //second parameter is top to down
               ),
               //you can set more BoxShadow() here
              ],
          ),
          child:Text("Box Shadow on Container", style: TextStyle(
            fontSize:20,
          ),),
       ),
    );
  }
}