且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在 Flutter 中创建带有圆角的自定义模糊形状

更新时间:2023-11-23 09:48:04

这里是

类 Customclipper 扩展 CustomClipper;{@覆盖路径 getClip(Size size) {var 路径 = 新路径();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);返回路径;}@覆盖bool shouldReclip(CustomClipper<Path> oldClipper) =>错误的;}

  1. 使用 quadraticBezierTo
  2. 创建所有圆角
  3. 在 ClipPath 中创建了一个容器
  4. 使用 Colors.white70 作为容器颜色

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 corners?

Here is the full example

class Customclipper extends CustomClipper<Path> {
  @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<Path> 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