将投影添加到 png 图像

Question

我想在颤动中为 png 图像（带有 alpha 的图像）添加阴影。

我已经尝试过使用 BoxShadow，但我不想有一个盒子阴影。我需要一个适应 png 图像的阴影。

想要的结果：

Answer 1

首先，您需要两张图片，更改其中一张的颜色（您的图片应该是透明的以实现此目的），例如：

child: Image.asset("assets/cat.png", color:Colors.black,),

然后使用Stack将黑色放在背景上并更改其位置以匹配阴影位置。

然后将BackdropFilter添加到黑色。

我认为会奏效。

代码：

Stack(children: [
    Opacity(child: Image.asset(imagePath, color: Colors.black), opacity: 0.2),
    ClipRect(child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
        child: Image.asset(imagePath)))
])

Answer 2

试试这个包：

https://pub.dev/packages/simple_shadow

它非常可配置，这是一个示例：

Container(
              child: SimpleShadow(
                child: Image(
                  width: 70.0,
                  height: 70.0,
                  image: NetworkImage(logoUrl),
                  semanticLabel: title,
                ),
                opacity: 0.25, // Default: 0.5
                color: Colors.black, // Default: Black
                offset: Offset(3, 3), // Default: Offset(2, 2)
                sigma: 7, // Default: 2
              ),
            ),