flutter only bottom shadow to container

Question

i have tried many solution but i couldn't get what i want.

https://stackoverflow.com/a/56744034/4862911 i applied in this answer but couldn't get correct response. There is still shadow top of container. How can i achieve it?

and also i have tried to surround my widget with Material . but still can't solve the problem.

 Material(
        elevation: 5,
        child: Container(
          height: 50,
          child: _buildEloAndLevel(),

        ),
      ),

score 3 · Accepted Answer · answered Aug 01 '20 at 00:44

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
      ],
    ),
  ),
),

This will create a shadow of 15 units arounds the Container. Now, the shadow can be moved with the offset property. Since, we don't want shadow on top, we can move it down by 15 units.

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
        offset: Offset(0, 15), // horizontally move 0, vertically move 15,
      ],
    ),
  ),
),

score 3 · Answer 2 · answered Oct 13 '21 at 23:33

I don't know if other examples are really setting a shadow for only bottom, but here is a know solution:

Container(
          height: 50.0,
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black54,
                  blurRadius: 20.0,
                  spreadRadius: -20.0,
                  offset: Offset(0.0, 25.0),
                )
              ],
            color: Colors.red,
          ),
        ),

Set the blur of the shadow with blurRadius and then set the spreadRadius to negative the blurRadius then use the dy property of the Offset() constructor, you set it to positive values to control the shadow bottom.

score 1 · Answer 3 · answered Aug 01 '20 at 00:57

All you need to do is playing around with your offset's value. And I think you don't need to wrap it with Material.

Offset is the displacement of the shadow from the box. It requires 2 double-types values, Offset(x, y);

Example:

Container(
          height: 50.0,
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black54,
                  offset: Offset(15.0, 20.0),
                  blurRadius: 20.0,
                )
              ],
            color: Colors.red,
          ),
        ),

TIPS FROM ME: To make sure the shadow doesn't show up in the top of your container, make sure your blur radius is not bigger than your Offset's y-value.

flutter only bottom shadow to container

3 Answers3