Question

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

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

所需结果： Desired result

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

我在处理 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

Answer 3

试试这个包：

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
              ),
            ),

将阴影添加到png图像

3 个答案: