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

Question

我试图在类似这样的Container小部件上实现模糊效果。

期望：

我试图去实现它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

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

Answer 4

为您的容器提供 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 5

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

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