Question 77902 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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:

    enter image description here

    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

    Login or Signup to reply.
  2. 0

    Try reducing the spread and increase the blur:

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

    You probably have to adjust the color since I could barely see the shadow while testing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search