Home > Net >  is it possible to give gradient blur effect in Custom paint in Flutter like below picture?
is it possible to give gradient blur effect in Custom paint in Flutter like below picture?

Time:01-23

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,
Output i want

This is what i have tried, My Output

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',
                  ),
                ),
              ),
  •  Tags:  
  • Related