颤振中的装饰图像模糊 [英] Blurred Decoration Image in Flutter

问题描述

我的应用背景如下：

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 ，但看不到任何变化。我在做什么错？

I'm wanting to blur the DecorationImage, so I added a BackdropFilter to the Container, but I don't see any change. What am I doing wrong?

推荐答案

您可以通过模糊容器子项来执行类似的操作。

You could do something like this, by blurring the container child instead.

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/dog.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: new BackdropFilter(
          filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          child: new Container(
            decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
          ),
        ),
      ),
    );
  }
}

屏幕截图

这篇关于颤振中的装饰图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！