Question

我的应用程序设置背景如此

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new ExactAssetImage('assets/lol/aatrox.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: new BackdropFilter(filter: new ImageFilter.blur(sigmaX: 600.0, sigmaY: 1000.0)),
        width: 400.0,
      ),
    );
  }
}

我想模糊DecorationImage，所以我在容器中添加了一个BackdropFilter，但我没有看到任何变化。我做错了什么？

Answer 1

你可以通过模糊容器子代来做这样的事情。

write

Screenshot

Answer 2

最好像这样放入ClipRRect：

Container(
    child: ClipRRect(
      child: Stack(
        children: <Widget>[
          FadeInImage.assetNetwork(
          placeholder: placeholder,
          image: thumbnail,
          fit: BoxFit.cover,
          ),
          BackdropFilter(
            child: Container(
              color: Colors.black12,
            ),
            filter: ImageFilter.blur(sigmaY: 10, sigmaX: 10),
          )
        ],
      ),
    ),
    width: double.infinity,
  ),

这种情况适用于图像（缩略图）列表项。

Answer 3

输出：

Container(
  height: 200,
  width: double.maxFinite,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: ExactAssetImage("your_chocolage_image"),
      fit: BoxFit.cover,
    ),
  ),
  child: ClipRRect( // make sure we apply clip it properly
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Container(
        alignment: Alignment.center,
        color: Colors.grey.withOpacity(0.1),
        child: Text(
          "CHOCOLATE",
          style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  ),
)

Answer 4

以上所有答案都是正确的，由于无法发表评论，我将在这里回复@ user123456。

我可以使BoxDecoration图像可点击吗– user123456

只需用GestureDetector包装整个容器

GestureDetector(
    onTap: () {...},
    child: Container(
        ...
        decoration: BoxDecoration(...),
    ),           
);

Answer 5

ImageFiltered 是完美的小部件。它创建了一个小部件，将 ImageFilter 应用到其子部件。 ImageFilter 是一种在您的应用中模糊或变换像素的简单方法。您可以从 dart:ui
导入它 代码：

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaY:5,sigmaX:5), //SigmaX and Y are just for X and Y directions
  child: Image.asset('assets/image.png') //here you can use any widget you'd like to blur .
    )

<块引用>

ImageFilter.blur() 使任何东西变得模糊和 ImageFilter.matrix() 允许您使用任何矩阵变换、缩放、平移、倾斜和旋转

输出：

<块引用>

与 ImageFiltered 类似的小部件是 BackdropFilter 。 BackdropFilter 可让您将过滤器应用于绘制的所有内容在小部件下方，而不是将过滤器应用于小部件本身。
它的性能也较差。如果你可以做你的效果 ImageFiltered ，用它代替 BackdropFilter。

您可以通过观看此ImageFiltered或访问official video了解有关flutter.dev的更多信息

Answer 6

您可以使用 Image 小部件。很简单。

 Image(
                        image: AssetImage("assets/images/news-media.png"),
                        color: Colors.black,
                        colorBlendMode: BlendMode.softLight,
                        fit: BoxFit.fill,
                      ),

Answer 7

正如我提到的 here，您应该将 ImageFiltered 小部件包装在 ClipRRect 中，以防止它流出小部件边界。代码如下：

ClipRRect(
  child: ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
    child: Image.asset('assets/flutter_image.png'),
  ),
),

这是输出：

在颤振的被弄脏的装饰图象

7 个答案: