如何在 Flutter 中創建帶有圓角的自定義模糊形狀

Question

我想繪制一個類似於下圖標記區域的自定義形狀。 有沒有辦法用模糊效果裁剪這個自定義形狀，然后指定角的半徑？

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 中創建了一個容器
3. 使用 Colors.white70 作為容器顏色

Answer 2

我使用這個庫，它有助於從svg文件構建形狀： https : //fluttershapemaker.com/

您需要做的就是將您的形狀導出為svg並將其粘貼到那里