如何避免Flutter中BoxDecoration阴影因容器靠近边界被裁切？

这个阴影裁切问题的核心在于阴影的绘制范围超出了父组件的可显示区域，具体细节如下：

1. 你设置的BoxShadow带有spreadRadius:5和blurRadius:10，这会让阴影向容器的所有方向（包括左右）向外扩展，但你的Container直接嵌套在Column中，没有给这些外部绘制的阴影预留额外空间。
2. 外层的ListView默认clipBehavior为Clip.hardEdge，会自动裁剪超出其可视范围的内容。当容器增长到靠近底部时，左右两侧的阴影部分因为超出了ListView结合外层Padding后的有效显示区域，就被裁切了。

这里有两种简单可靠的解决方式，你可以根据需求选择：

方式一：给带阴影的 Container 添加外部边距（推荐） #

给Container添加margin，为阴影预留足够的显示空间，这样阴影就不会被父组件裁切。根据你的阴影参数（spread+blur=15），设置margin: EdgeInsets.all(15)就足够容纳全部阴影：

Container(
  margin: EdgeInsets.all(15), // 新增该行，为阴影预留外部空间
  padding: EdgeInsets.all(20),
  child: _getChildren(_counter),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(20)),
    boxShadow: [
      BoxShadow(
        color: Colors.blue,
        offset: Offset(0, 0),
        blurRadius: 10.0,
        spreadRadius: 5.0,
      )
    ],
  ),
),

方式二：修改 ListView 的裁剪行为 #

如果你不想添加额外边距，可以把ListView的clipBehavior设置为Clip.none，这样它就不会裁切超出可视范围的内容，阴影就能完整显示：

ListView(
  clipBehavior: Clip.none, // 新增该行，关闭自动裁切
  controller: _scrollController,
  children: <Widget>[
    // ... 原有代码内容
  ],
),

不过这种方式可能会让容器内容超出屏幕边界时，阴影也会显示在屏幕外，体验不如第一种方式友好，所以更推荐使用方式一。

修改后，无论容器增长到什么位置，左右两侧的蓝色阴影都能完整显示，不会出现裁切问题。

内容的提问来源于stack exchange，提问作者SePröbläm