Flutter reverse box shadow (from inside to outside)
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,
]);
![MetaStack](https://i.stack.imgur.com/ZfQda.jpg?s=256&g=1)
MetaStack
MoonTree.com dev by day, Satorinet.io dev by night.
Updated on December 02, 2022Comments
-
MetaStack over 1 year
So I have a
boxShadow
inside aContainer
, inside thefrontLayer
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:
see how it's inside? I actually want it outside. I'll set the color back to white:
That's where I want the shadow, coming off the white frontLayer.
like this:
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?
-
Ruchit over 2 yearsdid you set you elevation of appbar to 0?
-