首页 文章

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

提问于
浏览
2

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

This marked shaped

1 回答

  • 7

    这不是你能找到的最好的解决方案,但它可以使用:full example

    enter image description here

    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中创建了一个Container

    • 我使用Colors.white70作为容器颜色

相关问题