Flutter文件夹形容器阴影优化求助：如何实现自然阴影效果

效果对比 #

• 目标效果：自然柔和的文件夹阴影
• 当前效果：生硬的阴影

我正在Flutter中开发一个文件夹形状的容器组件，参考Stack Overflow的部分实现编写了代码，但当前制作的阴影效果非常生硬，始终无法实现类似示例图的自然阴影，恳请帮助。

当前实现代码 #

Column(
  children: [
    SizedBox(
      height: 50,
    ),
    ClipPath(
      clipper: FolderShapeClipper(),
      child: Card(
        elevation: 0,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(2)),
        child: Container(
          width: 274,
          height: 188,
          decoration: FolderShapeDecoration(
            shadowColor: Color.fromRGBO(0, 0, 0, 0.2),
            shadowBlurRadius: 5,
            shadowOffset: Offset(-2, -2),
          ),
          child: Column(
            mainAxisAlignment:
                MainAxisAlignment.spaceAround,
            children: [
              const SizedBox(
                height: 12,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(
                    horizontal: 24),
                child: Row(
                  mainAxisAlignment:
                      MainAxisAlignment.spaceBetween,
                  children: const [
                    Text('test'),
                    Icon(Icons.star),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(
                    horizontal: 24),
                child: Row(
                  mainAxisAlignment:
                      MainAxisAlignment.spaceBetween,
                  children: const [
                    Text('count'),
                    Text('10'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ],
),

class FolderShapeClipper extends CustomClipper<Path> {
  final a = 0.10;
  final b = 0.25;
  final c = 0.5;
  @override
  Path getClip(Size size) {
    return Path()
      ..moveTo(size.width * a, 0)
      ..lineTo(0, size.height * b)
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, size.height * b)
      ..lineTo(size.width * c, size.height * b)
      ..lineTo(size.width * c, 0)
      ..lineTo(size.width * a, 0)
      ..close();
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

class FolderShapeDecoration extends BoxDecoration {
  final Color shadowColor;
  final double shadowBlurRadius;
  final Offset shadowOffset;

  FolderShapeDecoration({
    required this.shadowColor,
    required this.shadowBlurRadius,
    required this.shadowOffset,
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _FolderShapeBoxPainter(
        shadowColor: shadowColor,
        shadowBlurRadius: shadowBlurRadius,
        shadowOffset: shadowOffset);
  }
}

class _FolderShapeBoxPainter extends BoxPainter {
  final Color shadowColor;
  final double shadowBlurRadius;
  final Offset shadowOffset;
  final FolderShapeClipper clipper = FolderShapeClipper();

  _FolderShapeBoxPainter({
    required this.shadowColor,
    required this.shadowBlurRadius,
    required this.shadowOffset,
  });

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final size = configuration.size!;
    final borderPath = clipper.getClip(size);

    final shadowPaint = Paint()
      ..color = shadowColor
      ..maskFilter = MaskFilter.blur(BlurStyle.outer, shadowBlurRadius);

    canvas.drawPath(borderPath.shift(offset + shadowOffset), shadowPaint);
  }
}

解决方案 #

1. 调整阴影基础参数 #

自然阴影通常模拟左上光源，阴影应向右下偏移，同时增大模糊半径、降低透明度，避免生硬感：

FolderShapeDecoration(
  shadowColor: Color.fromRGBO(0, 0, 0, 0.15), // 降低透明度
  shadowBlurRadius: 12, // 增大模糊半径
  shadowOffset: Offset(3, 3), // 改为右下方向偏移
),

2. 叠加多层阴影增强层次感 #

单一阴影缺乏渐变，叠加两层不同参数的阴影能模拟真实光影的过渡：
修改_FolderShapeBoxPainter的paint方法：

@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
  final size = configuration.size!;
  final borderPath = clipper.getClip(size);

  // 外层大模糊低透明度阴影
  final shadowPaint1 = Paint()
    ..color = Color.fromRGBO(0, 0, 0, 0.08)
    ..maskFilter = MaskFilter.blur(BlurStyle.outer, 18);
  canvas.drawPath(borderPath.shift(offset + Offset(4, 4)), shadowPaint1);

  // 内层小模糊稍高透明度阴影
  final shadowPaint2 = Paint()
    ..color = Color.fromRGBO(0, 0, 0, 0.12)
    ..maskFilter = MaskFilter.blur(BlurStyle.outer, 8);
  canvas.drawPath(borderPath.shift(offset + Offset(2, 2)), shadowPaint2);
}

3. 优化路径圆角 #

当前路径全为直角，给转角添加圆角能让阴影过渡更自然：
修改FolderShapeClipper的getClip方法：

@override
Path getClip(Size size) {
  final cornerRadius = Radius.circular(2);
  return Path()
    ..moveTo(size.width * a, 0)
    ..lineTo(0, size.height * b - cornerRadius.x)
    ..arcToPoint(Offset(0, size.height * b), radius: cornerRadius, clockwise: false)
    ..lineTo(0, size.height - cornerRadius.x)
    ..arcToPoint(Offset(cornerRadius.x, size.height), radius: cornerRadius, clockwise: false)
    ..lineTo(size.width - cornerRadius.x, size.height)
    ..arcToPoint(Offset(size.width, size.height - cornerRadius.x), radius: cornerRadius, clockwise: false)
    ..lineTo(size.width, size.height * b + cornerRadius.x)
    ..arcToPoint(Offset(size.width - cornerRadius.x, size.height * b), radius: cornerRadius, clockwise: false)
    ..lineTo(size.width * c, size.height * b)
    ..lineTo(size.width * c, cornerRadius.x)
    ..arcToPoint(Offset(size.width * c + cornerRadius.x, 0), radius: cornerRadius, clockwise: false)
    ..lineTo(size.width * a + cornerRadius.x, 0)
    ..arcToPoint(Offset(size.width * a, cornerRadius.x), radius: cornerRadius, clockwise: false)
    ..close();
}

4. 用PhysicalShape简化实现 #

Flutter内置的PhysicalShape可直接为自定义形状生成自然阴影，无需手动绘制：

Column(
  children: [
    SizedBox(height: 50),
    PhysicalShape(
      color: Colors.white, // 设置容器背景色
      elevation: 6, // 阴影强度，数值越大阴影越明显
      clipper: FolderShapeClipper(),
      child: Container(
        width: 274,
        height: 188,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            const SizedBox(height: 12),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Text('test'),
                  Icon(Icons.star),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Text('count'),
                  Text('10'),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ],
)

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