How to change the tickness of shadow of conatiner based on the spread in flutter web

Question

I need to create a shadow for container but the shadow color needs to be changed when spread.

Container(
                          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                          margin: EdgeInsets.only(right: 3),
                          decoration: BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                  spreadRadius: 12,
                                  offset: Offset(0, 0),
                                   color: Color(0xffEBEBEB),
                                 // // color: Color(0xff1E1E1E),
                                 //   spreadRadius: 25,
                                   blurRadius: 14,
                                  //offset: Offset(0.0, 1),
                                )
                                
                              ]
                          ),
                          height: double.infinity,
                          width: 0.5,
                        ),

I tried many ways but nothing works.

Answer 1

If you want to add shadow, you have to add decoration as a parent of column widget. not as a separator.

Simple way you can wrap your column with Material and set the elevation

 Material(
  elevation:20,
  shadowColor: Colors.grey,
  child: Column(
 ....

---

Another option is by setting the shadow manually. Setting the offset for specific position of shadow:

Container(
  padding: EdgeInsets.all(8),
  decoration: BoxDecoration(
    color:Colors.white,
    boxShadow: [
    BoxShadow(
      offset: Offset(-12, 0),
      color: Colors.grey,
      blurRadius: 5,
    )
  ]),
  child: Column(
....

offset(-12,0) will placed the shadow only on the left side.

Result:

or you can customize the position of shadow.

• only left : Offset(-x,0)
• top and left : Offset(-x,-y)
• top and right : Offset(x,-y)
• bottom and left : Offset(-x,y)
• etc

Try demo here: https://dartpad.dev/?id=ebad3affe59160e1070642da95d1ab69