How to create a shadow on a divider line in flutter

Question

I have a divider and I would like to create a bottom shadow on it, so basically I want a line with a bottom shadow.

how can I achieve that?

Divider(height:1)

Answer 1

you don't need to use Divider at all. Container should be enough. Like this:

Container(
              height: 1.0,
              decoration: BoxDecoration(
                color: Colors.black,
                boxShadow: [
                  BoxShadow(
                    color: Colors.orange,
                    spreadRadius: 5,
                    blurRadius: 5,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
            )

EDIT: Another option is to not use box shadow but linear gradient to simulate shadow only at bottom like this:

Container(
              height: 10,
              decoration: BoxDecoration(
                border: Border(
                  top: BorderSide(
                    color: Colors.black,
                    width: 1.0,
                  ),
                ),
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.orange,
                    Colors.white,
                  ],
                ),
              ),
            ) 

Cheers

Answer 2

You can wrap your divider into a container and apply shadow to your container like this.

    Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 2,
                blurRadius: 7,
                offset: Offset(0, 6), // changes position of shadow
              ),
            ],
          ),
          child: Divider(
            height: 1,
            indent: 15,
            endIndent: 15,
            thickness: 1,
            color: Colors.blue,
          ),
        ),

Change properties according to your preference.

Answer 3

I wanted to create a shadow effect under the divider line in the flutter app but there is no such attribute in the divider class in a flutter. So we need to Container Widget to create such an effect. Watch the Solution Video , understand how the shadow effect is achieved.

1. Divider Widget is not used.
2. Shadow effect under the divider line is achieved with the help of Container Widget.
3. In Container Widget, BoxDecoration is used to create such effect