如何在 Flutter 中模糊容器或任何小部件

Question

我正在尝试在容器小部件上实现类似这样的模糊效果。

期望：

我尝试使用

BackdropFilter

和

ImageFilter.blur

过滤器来实现它，但它没有任何帮助。

代码

child: Container(
    child: Stack(
      children: <Widget>[
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: color
            ),
            height: 60,
            width: 60,
          ),
        ),
        Positioned(
          left: 15,
          top: 15,
          child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.lightBlue
            ),
            height: 30,
            width: 30,
          ),
        ),
      ]
    ),
  )

输出：

Answer 1

Container(
  height: 300,
  width: MediaQuery.of(context).size.width,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('your image url'),
      fit: BoxFit.cover
    ),
  ),
  child: ClipRect(
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
      child: Container(
        color: Colors.black.withOpacity(0.1),
      ),
    ),
  ),
);

在flutter中制作模糊容器的最佳方法，我使用clipRect来避免整个屏幕模糊。

Answer 2

Widgets

没有直接的方法来模糊自己（据我所知）。但您可以通过使用

CustomPainter

来实现。

MaskFilter.blur(BlurStyle.normal,blurSigma)可以将模糊效果添加到任何你想自己绘制的小部件上。

例如，

circle_blur_painter.dart

class CircleBlurPainter extends CustomPainter {

  CircleBlurPainter({@required this.circleWidth, this.blurSigma});

  double circleWidth;
  double blurSigma;

  @override
  void paint(Canvas canvas, Size size) {
    Paint line = new Paint()
      ..color = Colors.lightBlue
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = circleWidth
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSigma);
    Offset center = new Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2);
    canvas.drawCircle(center, radius, line);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

您可以将

CircleBlurPainter

与带有 CustomPaint

 属性的 

foregroundPainter 小部件一起使用。

blur_widget.dart

class BlurWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return CustomPaint(foregroundPainter: CircleBlurPainter(circleWidth: 30, blurSigma: 3.0));
  }
}

Answer 3

这里是如何制作模糊图像的示例：

Container(
        decoration: BoxDecoration(
          image: DecorationImage(image: NetworkImage(imgUrl), fit: BoxFit.cover),
        ),
        child: BackdropFilter(
            filter: ui.ImageFilter.blur(sigmaX: 4.0, sigmaY: 4.0),
            child: Container(
              decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
            ),
          ),
      );

关于你的情况

Container(
  child: Stack(
      children: <Widget>[
        Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.red
            ),
            height: 60,
            width: 60,
          ),
        Positioned(
          left: 15,
          top: 15,
          child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.lightBlue
            ),
            height: 30,
            width: 30,
          ),
        ),
        Container(
          child: BackdropFilter(
            filter: ui.ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: Container(
              decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
            ),
          ),
        )
      ]
  ),
);

Answer 4

child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
    child: Container( 
      height: 125,
      color: Colors.black54, 
      child: YourWidget()
   ),
)

Answer 5

为您的容器提供 Clip 属性

 Container(
  padding: EdgeInsets.all(12),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
  ),
  clipBehavior: Clip.antiAlias,
  child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
      child:
          const Icon(FontAwesomeIcons.play, size: 15)),
),

Answer 6

这实际上不是模糊，只是不透明。高斯模糊滤镜对纯色（如外圆）没有效果。根本没有什么可以模糊的。

这样就可以达到想要的效果了：

Container(
      height: 120,
      width: 120,
      color: Colors.blue.shade900,
      child: Stack(alignment: Alignment.center, children: <Widget>[
        Container(
            decoration:
                BoxDecoration(shape: BoxShape.circle, color: Colors.amber),
            height: 60,
            width: 60),
        Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle, color: Colors.amber.withOpacity(.3)),
            height: 80,
            width: 80),
      ]),
    )

将输出这个：

Answer 7

您可以简单地做的就是将 Widget 包装在 Order 中

材质 剪辑R矩形 背景滤镜

        Material(
            color: Colors.transparent,
            child: ClipRRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                child: Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 8,
                    vertical: 8,
                  ),
                  child: Text('Blurry Text'),
                ),
              ),
            ),
          );

Answer 8

您可以创建一个透明的容器颜色并应用该颜色的一些阴影吗？

Container(
                      width: 70,
                      height: 70,
                      decoration: BoxDecoration(
                        color: Colors.transparent,
                        borderRadius: BorderRadius.circular(70/ 2),
                        boxShadow: [
                          BoxShadow(
                            color: kWhite.withOpacity(0.5),
                            spreadRadius: 5,
                            blurRadius: 7,
                            offset:
                                Offset(0, 3), 
                          ),
                        ],
                      ),
                    )

Answer 9

嗯，我知道回答有点晚了，但我想尝试一下帮助那些正在阅读本文的人：D

在这种情况下，您可以使用下面的简单方法模糊容器；

      Container(
        color: Colors.black.withOpacity(0.8),
      ),

比你想象的更容易，不是吗？祝你编码顺利！