flutter - Flutter:如何在透明容器中添加阴影？

Question

我只想在透明容器的边缘上有一个阴影，就像您在顶部导航栏中看到的那样[图片1]。 Boxshadow在这种情况下不起作用，因为您会看到透明小部件后面的整个阴影。有没有一种方法只能从边缘添加阴影？
我感谢您的帮助

Answer 1

试试这个自定义的Decoration(如果需要，您可以添加其他一些参数，例如背景色，渐变等):

class FooDecoration extends Decoration {
  final EdgeInsets insets;
  final Color color;
  final double blurRadius;
  final bool inner;

  FooDecoration({
    this.insets = const EdgeInsets.all(12) ,
    this.color = Colors.black,
    this.blurRadius = 8,
    this.inner = false,
  });
  @override
  BoxPainter createBoxPainter([void Function() onChanged]) => _FooBoxPainter(insets, color, blurRadius, inner);
}

class _FooBoxPainter extends BoxPainter {
  final EdgeInsets insets;
  final Color color;
  final double blurRadius;
  final bool inner;

  _FooBoxPainter(this.insets, this.color, this.blurRadius, this.inner);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    var rect = offset & configuration.size;
    canvas.clipRect(rect);
    var paint = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(BlurStyle.outer, blurRadius);

    var path = Path();
    if (inner) {
      path
        ..fillType = PathFillType.evenOdd
        ..addRect(insets.inflateRect(rect))
        ..addRect(rect);
    } else {
      path.addRect(insets.deflateRect(rect));
    }
    canvas.drawPath(path, paint);
  }
}

用法示例(请注意，所有参数都有一些默认值):

child: Container(
  color: Colors.grey[200],
  child: Container(
    decoration: FooDecoration(
      insets: EdgeInsets.only(top: 15, bottom: 15),
      // color: Colors.black,
      // blurRadius: 8,
      // inner: true,
    ),
  ),
),