Flutter offset drop shadow around a transparent widget

Question

I am unable to achieve this effect in Flutter web (rendered as HTML), whereby the requirement is to have a transparent container (card or otherwise) with an offset shadow:

Current code:

   Container(
        decoration: BoxDecoration(
          color: Colors.transparent,
          borderRadius: BorderRadius.circular(myBtnRadius),
          boxShadow: [
            CustomBoxShadow(
              color: Colors.black87.withOpacity(myBtnShadowOpacity),
              blurRadius: 4,
              blurStyle: BlurStyle.outer,
              spreadRadius: -2,
              offset: const Offset(3, 5),
            ),
          ],
        ),
        child: ClipPath(
            clipper: ShapeBorderClipper(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(myBtnRadius)))),
            child: _buildMyCard()),
      ),

CustomBoxShadow derived from code here

_buildMyCard just returns a Card widget with elevation set to 0 and color transparent.

Best result I can achieve is this:

Any ideas? Do I need to get more creative with some clipping / mask?

score 0 · Answer 1 · answered Jul 18 '23 at 16:10

0

Ultimately, when rendering a Flutter web app as HTML, the only way I could achieve this effect was to use a Stack widget with an html.DivElement using style.BoxShadow to create the shadow with cut-out effect.

answered Jul 18 '23 at 16:10

CoastalB

695
4
15

Flutter offset drop shadow around a transparent widget

1 Answers1