How to create a custom blured shape with rounded corners in Flutter

前端 未结 1 1727
耶瑟儿~
耶瑟儿~ 2021-01-12 09:59

I want to draw a custom shape similar to the marked area of below image. Is there a way to clip this custom shape with blur effect and then specify the radius for the corner

1条回答
  •  囚心锁ツ
    2021-01-12 10:24

    Here is the full example

    class Customclipper extends CustomClipper {
      @override
      Path getClip(Size size) {
        var path = new Path();
        path.lineTo(0.0, size.height - 20);
        path.quadraticBezierTo(0.0, size.height, 20.0, size.height);
        path.lineTo(size.width - 20.0, size.height);
        path.quadraticBezierTo(size.width, size.height, size.width, size.height - 20);
        path.lineTo(size.width, 50.0);
        path.quadraticBezierTo(size.width, 30.0, size.width - 20.0, 30.0);
        path.lineTo(20.0, 5.0);
        path.quadraticBezierTo(0.0, 0.0, 0.0, 20.0);
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper oldClipper) => false;
    }
    
    1. Created all the rounded corners using quadraticBezierTo
    2. Created a Container inside a ClipPath
    3. Used the Colors.white70 for the container color

    0 讨论(0)
提交回复
热议问题