如何在 Flutter 上模糊图像本身？

Posted 2023-02-23

【中文标题】如何在 Flutter 上模糊图像本身？

【英文标题】：How can I blur the image itself on Flutter?

【发布时间】：2021-01-26 11:50:20

【问题描述】：

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

我想要做的是模糊网络图像本身，使其没有实心边框。如您所知，使用BackDropFilter，图像会变得模糊，但仍有实心且不连续的边框。

也许它不必是“模糊图像本身”，但我仍然不知道如何用自然淡出的边框模糊图像。

请帮帮我。谢谢

【参考方案1】：

您可以使用Stack，其中BackdropFilter 覆盖您的图像（如@Narritt 建议的那样），或者您可以使用the ImageFiltered class：

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

【讨论】：

ImageFiltered 类是我正在寻找的。太感谢了！我学到了很多！

【参考方案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)
    )
  ]
)