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

Question

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

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

也许它不必是“模糊图像本身”，但我仍然无法弄清楚如何用自然淡出的边界模糊图像。

请帮帮我。谢谢

Answer 1

您可以使用 a Stackwhere a覆盖您的图像（如@NarrittBackdropFilter建议的那样），也可以使用该类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,
  ),
)

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