Adding Shadow To Semi Transparent Container

Question

I am trying to add shadow to my semi-transparent container in flutter but as you might guess shadow can be seen through the container and I cannot achieve what I want.

I tried nearly all solutions suggested at StackOverflow or Google but they didn't work out.

My current code is below:

                         Container(
                            height: 75,
                            decoration: BoxDecoration(
                                boxShadow: const [
                                  BoxShadow(
                                      color: Colors.black26,
                                      offset: Offset(2, 4),
                                      blurStyle: BlurStyle.normal,
                                      blurRadius: 5,
                                      spreadRadius: 2)
                                ],
                                color: kDarkPrimaryColor.withOpacity(0.1),
                                borderRadius: BorderRadius.circular(5)),
                            child: ListTile(
                              leading: Text("ABC"),
                            ),
                          )

Here is the result:

I also tried BlurStyle.outer and the other options but it didn't work out.

Do you have any suggestions?

Answer 1

How to get shadow outside of a container in flutter

Check out that post, they used linear gradient to try and achieve the result you are wanting.