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

【问题标题】：How to create a custom blured shape with rounded corners in Flutter如何在 Flutter 中创建带有圆角的自定义模糊形状
【发布时间】：2023-03-18 03:30:01
【问题描述】：

我想绘制一个类似于下图标记区域的自定义形状。有没有办法用模糊效果剪辑这个自定义形状，然后指定角的半径？

【问题讨论】：

标签： dart flutter clip flutter-layout

【解决方案1】：

我使用这个库，它有助于从 svg 文件构建形状： https://fluttershapemaker.com/

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

【讨论】：

【解决方案2】：

这里是 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;
}

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

【讨论】：

如何创建圆形菱形？我创建了菱形，但我无法添加圆形半径。