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

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添加到Container中,但我没有看到任何变化.我做错了什么？

Answer 1

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

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

截图

Answer 2

截屏：

使用Stack：

SizedBox(
  height: 200,
  child: Stack(
    fit: StackFit.expand,
    children: [
      Image.asset('chocolate_image', fit: BoxFit.cover),
      ClipRRect( // Clip it cleanly. 
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(
            color: Colors.grey.withOpacity(0.1),
            alignment: Alignment.center,
            child: Text('CHOCOLATE'),
          ),
        ),
      ),
    ],
  ),
)

不使用Stack：

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 3

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

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

这是输出：

Answer 4

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。

您可以通过观看官方视频或访问flutter.dev了解有关ImageFiltered的更多信息