I am coding the below output and i get the design i want but not able to get the blur effect inside the canvas.
This is the output i am trying to build,

Here is the Code,
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;
}
}
Thanks in advance!
CodePudding user response:
I don’t know if you have a strict requirement to use a custom paint but you can achieve that effect using the BackdropFilter and using an ImageFilter.blur as your filter value.
CodePudding user response:
Use BackdropFilter. Demo usage:
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',
),
),
),

