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

Question

我想画一个类似下图标记区域的自定义形状。有没有一种方法可以使用模糊效果剪切这个自定义形状，然后指定角落的半径？

- Rafiqul Hasan

Answer 1

这里是完整示例

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. 使用quadraticBezierTo创建所有圆角
2. 在ClipPath中创建Container
3. 将容器颜色设置为Colors.white70

- Raouf Rahiche

---

我该如何创建一个圆形的菱形图形？我已经创建了菱形图形，但是无法添加圆形半径。 - Umesh Chakradhar

Answer 2

我使用这个库，它可以从svg文件中构建形状： https://fluttershapemaker.com/

你所需要做的就是将你的形状导出为svg并粘贴到那里

- Guvanch