如何在颤动中实现倾斜的路径（以这张照片为例）

Question

我正在努力实现的路径

我一直在尝试实现这条路径，但是我在裁剪时遇到了问题，它不仅裁剪了容器的相对部分，而且还弄脏了我的路径。

我也在寻求实现相同的效果，但方向相反。

这是我到目前为止所做的代码（这是一个上弧剪辑路径）：

class UpArcClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height);
    path.lineTo(0.0, size.height - 100);
    path.quadraticBezierTo(
        size.width / 2, size.height, size.width, size.height - 100);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper old) => false;
}

Answer 1

已经自己实现了：

class LeftInclinedArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, size.height);
    path.lineTo(0, size.height * 0.7);
    path.quadraticBezierTo(
        size.width / 3, size.height * 0.45, size.width, size.height * 0.53);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper old) => false;
}

如何在颤动中实现倾斜的路径（以这张照片为例）

How can I achieve an inclined looking path in flutter (taking this picture as example)

user-interface

dart

flutter

flutter-animation

flutter-web