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

Question

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

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

也许它不一定是 'blurring image itself' 但我仍然不知道如何用自然淡出的边框模糊图像。

请帮帮我。谢谢

Answer 1

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

Answer 2

您可以使用 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,
  ),
)

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

How can I blur the image itself on Flutter?

flutter

flutter-layout

flutter-image