如何在Flutter中对图像本身进行模糊处理？

Question

最近我尝试对图片进行模糊处理。但是使用BackDropFilter方法只会在图像上产生模糊效果，而不会使图像本身变得模糊。

我的目标是使网络图片自身变得模糊，以便它没有实心边框。如你所知，使用BackDropFilter时，图像被模糊了，但仍具有实心和不连续的边框。

也许不必要“使图像自身变模糊”，但我仍然无法想出如何用自然逐渐消失的边框来模糊图像。

请帮助我。谢谢！

- CrimsonFoot

Answer 1

你可以使用 Stack，其中一个 BackdropFilter 覆盖在图像上（由 @Narritt 建议），或者你可以使用ImageFiltered 类：

import 'dart:ui';

// ...

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
  child: Image.network(
    "https://picsum.photos/id/237/200/300",
    fit: BoxFit.cover,
  ),
)

- Giorgio

---

ImageFiltered类就是我正在寻找的。非常感谢！我学到了很多！ - CrimsonFoot

Answer 2

BackDropFilter会使其下方的所有图层模糊。例如，您可以在Stack中使用它：

Stack(
  children: [
    // Image you need to blur
    Align(
      alignment: Alignment(0, 0),
      child: Image.asset(path),
    ),
    // BackdropFilter
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0)
    )
  ]
)

- Narritt