如何使聊天气泡形状使用路径？

Question

如何让聊天气泡形状使用路径？

期待：

class ChatBubbleShapeBorder extends ShapeBorder {
  final double arrowWidth;
  final double arrowHeight;
  final double arrowArc;
  final double radius;

  ChatBubbleShapeBorder({
    this.radius = 12.0,
    this.arrowWidth = 16.0,
    this.arrowHeight = 8.0,
    this.arrowArc = 0.5,
  }) : assert(arrowArc <= 1.0 && arrowArc >= 0.0);

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.only(bottom: arrowHeight);

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) =>
      null ?? Path();

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    rect = Rect.fromPoints(
        rect.topLeft, rect.bottomRight - Offset(0, arrowHeight));
    double x = arrowWidth, y = arrowHeight, r = 1 - arrowArc;
    return Path()
      ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(radius)))
      ..moveTo(rect.topRight.dx - 30, rect.topRight.dy)
      ..relativeLineTo(-x / 2 * r, -y * r)
      ..relativeQuadraticBezierTo(
          -x / 2 * (1 - r), -y * (1 - r), -x * (1 - r), 0)
      ..relativeLineTo(-x / 2 * r, y * r);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}

  @override
  ShapeBorder scale(double t) => this;
}

经过尝试，这是我的镜头

实际：

我尝试向左和向右移动箭头以显示聊天气泡。

你能帮我移动箭头吗？

更新：

我尝试改变矩形点并移动箭头的位置。看起来不错，但是，我的箭头有问题

rect =
    Rect.fromPoints(rect.topLeft + Offset(arrowWidth, 0), rect.bottomRight - Offset(arrowWidth, 0));
double x = arrowWidth, y = arrowHeight, r = 1 - arrowArc;
return Path()
  ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(radius)))
  ..moveTo(rect.topRight.dx + arrowWidth, rect.topRight.dy + 30)
  ..relativeLineTo(-x / 2 * r, -y * r)
  ..relativeQuadraticBezierTo(
      -x / 2 * (1 - r), -y * (1 - r), -x * (1 - r), 0)
  ..relativeLineTo(-x / 2 * r, y * r);

拍摄：