Flutter 透明Container设置BoxShadow时容器被填充 如何仅显示外围阴影

问题原因 #

你遇到的是Flutter透明Container添加BoxShadow的常见问题：阴影绘制默认会绑定Container自身的绘制区域，当Container设置为透明色时，默认绘制逻辑会连带阴影的内部区域产生不想要的填充效果，无法仅保留外围阴影。

解决方案 #

方案1：自定义裁剪实现（灵活适配所有形状）

通过自定义Clipper裁剪掉Container的内部区域，仅保留外围阴影部分，代码示例如下：

import 'package:flutter/material.dart';

class ShadowContainer extends StatelessWidget {
  const ShadowContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        // 必须设置透明底色
        color: Colors.transparent,
        boxShadow: [
          BoxShadow(
            blurRadius: 12,
            spreadRadius: 3,
            color: Colors.black.withOpacity(0.2),
          )
        ],
        // 如需圆角可在此处添加
        borderRadius: BorderRadius.circular(8),
      ),
      child: ClipPath(
        clipper: _InnerEmptyClipper(),
        child: Container(
          color: Colors.transparent,
          // 此处可放入你的子组件
        ),
      ),
    );
  }
}

class _InnerEmptyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      // 先添加整个容器的路径
      ..addRect(Rect.fromLTWH(0, 0, size.width, size.height))
      // 再添加比容器小1px的内部区域路径
      ..addRect(Rect.fromLTWH(1, 1, size.width - 2, size.height - 2))
      // 设置奇偶填充规则，两个路径重叠的内部区域会被裁剪
      ..fillType = PathFillType.evenOdd;
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

方案2：使用PhysicalModel组件（更简洁）

如果不需要自定义复杂阴影参数，直接用Flutter自带的PhysicalModel组件即可快速实现透明容器带外围阴影的效果：

PhysicalModel(
  color: Colors.transparent,
  elevation: 6,
  shadowColor: Colors.black.withOpacity(0.2),
  // 圆角配置
  borderRadius: BorderRadius.circular(8),
  child: const SizedBox(
    width: 200,
    height: 200,
    // 此处放入你的子组件
  ),
)

效果示例 #

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