Flutter 中的模糊装饰图像

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，所以我向 Container 添加了一个 BackdropFilter，但我没有看到任何变化。我做错了什么？

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

以上答案都正确，我会在这里回复@user123456，因为我还不能发表评论。

can i make the BoxDecoration image clickeble – user123456

只需用 GestureDetector 包裹整个 Container

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

Answer 4

最好输入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 5

ImageFiltered is the perfect widget for that . It creates a widget that applies an ImageFilter 到 child。 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() make anything blurry and ImageFilter.matrix() lets you use any matrix for transformation ,scaling , translating , skewing and rotating

输出：

A similar widget to ImageFiltered is BackdropFilter . BackdropFilter lets you apply filter to everything that's painted beneath a widget , instead of applying the filter to the widget itself.
It's also less performant . If you can do your effect with ImageFiltered , Use it instead of BackdropFilter.

您可以了解更多 ImageFiltered by watching this official video or by visiting flutter.dev

Answer 6

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

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

Answer 7

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

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

这是输出：

Flutter 中的模糊装饰图像

Blurred Decoration Image in Flutter

dart

flutter