如何生成像提供的图像中的clipPath答案

【问题标题】：How to generate clipPath like the one in image provided如何生成像提供的图像中的clipPath
【发布时间】：2020-02-15 19:15:59
【问题描述】：

我想生成一个小部件，它的剪辑路径与给定图像中的一样。我在这里谈论的是应用程序屏幕的白色部分，其中包含信息。

下面的代码是我在实验时尝试的，但失败了！

 Path getClip(Size size) {
var path = new Path();
var controlpoint = Offset(10.0, size.height);
var endpoint = Offset(size.width / 2, size.height);

path.lineTo(0.0, size.height - 100);

path.quadraticBezierTo(
    controlpoint.dx, controlpoint.dy, endpoint.dx, endpoint.dy);

path.lineTo(size.width, size.height);
path.lineTo(size.width, 0.00);

return path;

请帮我处理这段代码:)

编辑：我到了这部分，但我仍然卡住了:(

**Path getClip(Size size) {
final path = Path();
path.lineTo(size.width, 100);
path.lineTo(size.width, size.height);
path.lineTo(0.00, size.height);
path.close();

return path;

}**

及以上自定义clipPath，使用ClipRRect。

【问题讨论】：

检查Path#arcToPoint()方法
任何我可以参考的链接？
arcToPoint
我还是迷路了:(
我得到了所有点的结果，除了耐克上面的起始点。我在顶部有一个尖头形状:(

标签： android ios user-interface flutter clip-path

【解决方案1】：

最后对代码进行了一些操作，得到以下输出：

Path getClip(Size size) {
final path = Path();
path.lineTo(20.0, 0.0);
path.lineTo(size.width, 120);
path.lineTo(size.width, size.height);
path.lineTo(0.00, size.height);
path.close();

return path;

添加了一个父母是这样的：

ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(25.0),
            bottomLeft: Radius.circular(25.0),
          ),
          child: ClipPath(
          clipper: SinglePageClipper(),
          child: Container(
            color: Colors.red,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 400,
                ),
                Center(child: Text('Demo Page'),)
              ],
            ),
          ),
        ),
      ),

我认为这是一些可以改进的事情，所以会尝试这样做。但与此同时，如果有人有更好的方法。请用知识启发我们，因为这对于像我这样的初学者来说更耗时。

【讨论】：