flutter - 是否可以在 Flutter 中的自定义绘制中提供渐变模糊效果，如下图所示？

Question

我正在对以下输出进行编码，我得到了我想要的设计，但无法在画布内获得模糊效果。

这是我正在尝试构建的输出，

这是我尝试过的，

这是代码，

class MyCustomPainter extends CustomPainter {

@override



 void paint(Canvas canvas, Size size) {
    Paint paint0 = Paint()
      ..color = const Color.fromARGB(128,255,255,255)
    ..style = PaintingStyle.fill
    ..strokeWidth = 2.0;

Path path0 = Path();
path0.moveTo(size.width * 0.1500300, size.height * 0.1238500);
path0.cubicTo(
    size.width * 0.0037200,
    size.height * 0.1023500,
    size.width * 0.0522600,
    size.height * 0.7552500,
    size.width * 0.1500500,
    size.height * 0.8761750);
path0.cubicTo(
    size.width * 0.2767600,
    size.height * 0.8761750,
    size.width * 0.7234100,
    size.height * 0.8735500,
    size.width * 0.8501100,
    size.height * 0.8735500);
path0.cubicTo(
    size.width * 0.9464300,
    size.height * 0.7575750,
    size.width * 0.9946900,
    size.height * 0.0944750,
    size.width * 0.8496900,
    size.height * 0.1268750);
path0.cubicTo(
    size.width * 0.7230200,
    size.height * 0.1268750,
    size.width * 0.5303400,
    size.height * 0.1263500,
    size.width * 0.1500300,
    size.height * 0.1238500);
path0.close();
canvas.drawPath(path0, paint0);


}

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

提前致谢！

Answer 1

我不知道您是否对使用自定义绘画有严格的要求，但您可以使用BackdropFilter和ImageFilter.blur作为您的过滤器值来实现该效果。

Answer 2

使用BackdropFilter. 演示用法：

            BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
                child: Container(
                  width: 334.66,
                  height: 212.66,
                  color: Colors.black.withOpacity(0.2),
                  child: Center(
                    child: Text(
                      'Demo Text',
                  ),
                ),
              ),