1

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?

Ken White
  • 123,280
  • 14
  • 225
  • 444
bahadir arslan
  • 4,535
  • 7
  • 44
  • 82

1 Answers1

0

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.

flutterloop
  • 546
  • 3
  • 15
  • It might be but unfortunately, it is not. Transparency changes everything. Thank you anyway. – bahadir arslan Mar 27 '22 at 23:32
  • have you tried to just match the color that would be there instead of setting it to transparent? it would give a bit of a different look obiously but maybe worth a try, or setting borders with varying thinknesses per side? – flutterloop Mar 27 '22 at 23:33
  • But the background is dynamic so setting just the same color doesn't help. I can feel this can be achieved with some paint method override or clipping but I am very new at flutter so I am stuck. – bahadir arslan Mar 27 '22 at 23:44
  • Did you resolve this in the end? I am compiling for web (rendered as HTML) and am still unable to achieve the effect of a drop shadow under a transparent card (with 0 elevation and radius) – CoastalB Jul 13 '23 at 16:27