Flutter反转框阴影（从内到外）

Question

所以我在 Container 里面有一个 boxShadow，在 BackdropScaffold 的 frontLayer 里面：

    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: ...),
            ...)

所以，注意我将颜色设置为透明，这样我们就可以看到阴影：

看看里面怎么样？我实际上想要它在外面。我会将颜色设置回白色：

这就是我想要阴影的地方，从白色的 frontLayer 脱落。

喜欢this:

如何反转此阴影以使其表现出那样的效果？

我认为像我展示的那样的容器自然会以正确的方式运行，但是当我将该容器放入 BackdropScaffold 时，它似乎以某种方式反转了它...你能帮我弄清楚为什么吗？

Answer 1

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

参见 https://github.com/fluttercommunity/backdrop/issues/112 我了解到阴影是反转的，因为前层位于 Material 小部件内。因此，在此功能中，我们将 material 小部件包装在一个 Stack 中，该 Stack 包含一个具有给定 BoxShadow 列表的 Container。如果不提供box shadow，效果和之前一样

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

Flutter反转框阴影（从内到外）

Flutter reverse box shadow (from inside to outside)

shadow

flutter

flutter-widget

backdrop