Flutter 颤振自定义剪半径

我正试着用颤振中的定制剪刀制作一个定制剪刀，但我不知道如何在我的形状中添加一些圆角

左侧显示所需结果的屏幕截图，右侧显示我的结果：

这是我的clipper代码

class SideArrowClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final Path path = Path();
    final double startMargin = size.width / 14;
    final double s1 = size.height * 0.4;
    final double s2 = size.height * 0.6;
    print('S1:$s1 SH:${size.height / 2} S2:$s2');
    path.lineTo(startMargin, 0);
    path.lineTo(startMargin, s1);
    path.lineTo(0, size.height / 2);
    path.lineTo(startMargin, s2);
    path.lineTo(startMargin, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

class SideArrowClip扩展了CustomClipper{
@凌驾
路径getClip（大小）{
最终路径路径=路径（）；
最终双星边缘=尺寸。宽度/14；
最终双s1=尺寸高度*0.4；
最终双s2=尺寸高度*0.6；
打印（'S1:$S1 SH:${size.height/2}S2:$S2'）；
lineTo路径（startMargin，0）；
路线图（startMargin，s1）；
path.lineTo（0，size.height/2）；
路线图（起点边缘，s2）；
线路图（起始边缘、大小、高度）；
path.lineTo（大小.宽度，大小.高度）；
path.lineTo（size.width，0）；
path.close（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）{
返回true；
}
}

我建议您看看这个插件。此插件允许您使用各种有趣的形状，如下图所示的

MessageClipper（）

。如果旋转90度，这可以满足您的需要

或者，您可以将一个

triangeleclipper（）

和一个带有椭圆形边框的简单

容器（）

组合在一起，以形成圆形边缘

如上面链接中的示例所示，它看起来像这样：

ClipPath(
  clipper: MessageClipper(borderRadius: 16),
  child: Container(
    height: 200,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(16.0)),
      color: Colors.red,
    ),
    child: Center(child: Text("MessageClipper()")),
),

我使用

addrect（rect.fromRectAndRadius

表示圆角矩形

import 'package:flutter/material.dart';

    class SideArrowClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        final double width = size.width;
        final double height = size.height;
        final double startMargin = width / 14;

        final double s1 = height * 0.3;
        final double s2 = height * 0.7;
        final Path path = Path()
          ..addRRect(RRect.fromRectAndRadius(
              Rect.fromLTWH(startMargin, 0, width-startMargin, height),
              const Radius.circular(5)))
          ..lineTo(startMargin, s1)
          ..lineTo(0, size.height / 2)
          ..lineTo(startMargin, s2)
          ..close();
        return path;
      }

      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return oldClipper != this;
      }
    }

导入“包装：颤振/材料.省道”；
类SideArrowClipper扩展了CustomClipper{
@凌驾
路径getClip（大小）{
最终双宽度=尺寸。宽度；
最终双倍高度=尺寸。高度；
最终双星边缘=宽度/14；
最终双s1=高度*0.3；
最终双s2=高度*0.7；
最终路径路径=路径（）
…添加更正（从矩形和半径更正）(
垂直于LTWH（起始边缘，0，宽度起始边缘，高度），
常数半径（圆形（5）））
…线路至（startMargin，s1）
..lineTo（0，尺寸.高度/2）
…线路至（startMargin，s2）
…关闭（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）{
返回oldClipper！=此；
}
}

实现它的另一种方法是在每次愤怒之前使用

path.arcToPoint

方法。下面是我如何实现它的示例：

  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(2.0, 0.0);
    path.lineTo(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL - 1 , 0.0);
    path.arcToPoint(Offset(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL + 1 , 2.0), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(size.width - 1, size.height/2 - 1);
    path.arcToPoint(Offset(size.width - 1, size.height/2 + 1), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL + 1, size.height - 1);
    path.arcToPoint(Offset(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL - 1, size.height), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(2, size.height);
    path.arcToPoint(Offset(0.0, size.height - 1), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(0.0, 1.0);
    path.arcToPoint(Offset(1.0, 0.0), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.close();
    return path;
  }

这是一个半径为2px的形状：

---

我知道这个库，但旋转不是一个直接的解决方案。你能添加一个屏幕截图吗？我认为我的解决方案更简单。我添加了这个路径的形状