为 png 图像添加阴影答案

【问题标题】：Add drop shadow to png image为 png 图像添加阴影
【发布时间】：2019-07-20 09:32:49
【问题描述】：

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

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

期望的结果：

【问题讨论】：

【解决方案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)))
])

【讨论】：

很高兴听到 :)
只有这个可以做到吗？
不幸的是，它会模糊背景，因此如果您的应用程序背景中有图形，这不是理想的解决方案。但总比没有好，我想......我不知道更好的方法，除了在 Photoshop 中放置阴影然后嵌入图像。

【解决方案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
              ),
            ),

【讨论】：

【解决方案3】：

我在使用 SVG 图像时遇到了同样的问题，因此我为任何小部件开发了一个解决方案，希望对您有所帮助。

Stack(
  children: <Widget>[
    Transform.translate(
      offset: offset,
      child: ImageFiltered(
        imageFilter: ImageFilter.blur(sigmaY: sigma, sigmaX: sigma),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.transparent,
              width: 0,
            ),
          ),
          child: Opacity(
            opacity: opacity,
            child: ColorFiltered(
              colorFilter: ColorFilter.mode(color, BlendMode.srcATop),
              child: child,
            ),
          ),
        ),
      ),
    ),
    child,
  ],
)

我还在 Pub.dev 中上传了一个包：https://pub.dev/packages/simple_shadow

【讨论】：