带有内阴影的中心小部件的颤振列布局答案

【问题标题】：Flutter column layout with center widget with inner shadow带有内阴影的中心小部件的颤振列布局
【发布时间】：2022-01-07 14:47:37
【问题描述】：

我正在尝试实现以下布局：

安全区域，包含一列 - 其中中心小部件（可滚动列表）具有内阴影效果

另外，我想使用 平铺图像作为背景，用于不安全区域 + 列中的顶部和底部小部件（如附图所示）。

我不想为中心小部件使用 box-shadow。

有没有简单的方法来实现这一点？

【问题讨论】：

标签： flutter shadow

【解决方案1】：

在这种情况下，我更喜欢使用Stack。您可以使用 nexted Stack 为 SafeArea

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: LayoutBuilder(
      builder: (context, constraints) => Stack(
        children: [
          Container(   ///background image
            color: Colors.pink,
          ),
       
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              height: constraints.maxHeight * .1,
              decoration: const BoxDecoration(color: Colors.green, boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  offset: Offset(0, 10),
                  blurRadius: 10,
                )
              ]),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: constraints.maxHeight * .1,
              decoration: const BoxDecoration(color: Colors.red, boxShadow: [
                BoxShadow(
                  color: Colors.black87,
                  offset: Offset(0, -10),
                  blurRadius: 10,
                )
              ]),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: SizedBox(
              height: constraints.maxHeight * .8 - 20, //remove shadow area
              child: ListView(
                children: List.generate(
                    44,
                    (index) => Container(
                          margin: EdgeInsets.symmetric(vertical: 10),
                          height: 70,
                          color: index.isEven
                              ? Colors.deepPurple
                              : Colors.cyanAccent,
                        )),
              ),
            ),
          ),
        ],
      ),
    ));
  }

【讨论】：