BackDropFilter 模糊不适用于图像

Question

我想模糊我的图像，我尝试了这个：

BackdropFilter(
  filter: ImageFilter.blur(
    sigmaX: 10,
    sigmaY: 10
  ),
  child: Image.file(
    File(imagePath),
    fit: BoxFit.cover,
  )
)

但我的问题是这不适用于图像，老实说我不知道为什么？

Answer 1

BackdropFilter 仅将模糊应用于其后面的内容，而不是子窗口小部件本身。在您的情况下，由于 Image.file 是直接子级，因此模糊不会按您的预期应用于图像。我使用网络图像来展示一个易于应用的示例。

Stack(
      children: [
        Image.network(
          'https://picsum.photos/200/300',
          fit: BoxFit.cover,
        ),
        Positioned.fill(
          child: ClipRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Container(
                color: Colors.black
                    .withOpacity(0),
              ),
            ),
          ),
        ),
      ],
    ),