Flutter：如何为带圆角的两个Container添加正确阴影

你的问题出在两个子容器各自添加了阴影，导致中间区域阴影重叠，无法实现整体圆角阴影的效果。正确的做法是把阴影统一放在父容器上，子容器只负责对应位置的圆角和背景色，具体修改如下：

• 父容器添加BoxDecoration，设置圆角和阴影，背景色设为透明
• 左侧容器仅保留左上、左下圆角
• 右侧容器仅保留右上、右下圆角
• 移除两个子容器的阴影配置

修改后的代码：

Container(
  width: 396,
  height: 128,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(10)),
    boxShadow: [
      BoxShadow(
        color: Color(0x4C0DCBED),
        offset: Offset(0, 2),
        blurRadius: 5,
      ),
    ],
  ),
  child: Row(
    children: [
      Container(
        width: 120,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10),
            bottomLeft: Radius.circular(10),
          ),
          color: Color(0xFFFFFFFF),
        ),
      ),
      Expanded(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(10),
              bottomRight: Radius.circular(10),
            ),
            color: Color(0xFFFFFFFF),
          ),
        ),
      ),
    ],
  ),
)

这样父容器的阴影会呈现完整的圆角效果，两个子容器拼接后整体看起来是一个完整的圆角卡片，中间不会出现多余的阴影。

内容的提问来源于stack exchange，提问作者ArtemKo