Search code examples
fluttershadowflutter-widgetbackdrop

Flutter reverse box shadow (from inside to outside)

So I have a boxShadow inside a Container, inside the frontLayer of a BackdropScaffold:

    BackdropScaffold(
            headerHeight: 430,
            backgroundColor: Theme.of(context).backgroundColor,
            backLayerBackgroundColor: Theme.of(context).backgroundColor,
            frontLayerBackgroundColor: Colors.transparent,
            appBar: BackdropAppBar(...),
            backLayer: Container(...),
            frontLayer: Container(
                decoration: BoxDecoration(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8),
                    topRight: Radius.circular(8)),
                  boxShadow: [
                    BoxShadow(                        // <--- this
                      color: const Color(0x33000000),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: Offset(0, 3))])
                child: ...),
            ...)

So, notice I set the Colors to transparent, that's so we can see the shadow:

inner shadow

see how it's inside? I actually want it outside. I'll set the color back to white:

outer shadow missing

That's where I want the shadow, coming off the white frontLayer.

like this:

correct

How do I invert this shadow so that it behaves that way?

I think a container like the one I have shown naturally does it the right way, but when I put that container in a BackdropScaffold it seems to invert it somehow... can you help me figure out why?

Solution

  • https://github.com/fluttercommunity/backdrop/pull/113

    see https://github.com/fluttercommunity/backdrop/issues/112 I learned that the shadow was inverted since the front layer is within a Material widget. So in this feature we wrap the material widget in a Stack containing a Container with the given BoxShadow list. if no box shadow is provided, it works the same as before.

    var frontPanel = Material(...Flex(child: widget.frontLayer)...);
return Stack(children: <Widget>[
  Container(decoration: BoxDecoration(boxShadow: widget.frontLayerBoxShadow)),
  frontPanel,
]);