如何在 flutter 中使用 CustomClipper 在路径上绘制图钉

Question

如何在使用 CustomClipper 时在 path 上绘制此 pin？

class ErrorClipper extends CustomClipper<Path> {
  ErrorClipper({
    this.radius = 5,
    this.offset = 10,
    this.nipSize = 10,
  });

  final double radius;
  final double offset;
  final double nipSize;

  @override
  Path getClip(Size size) {
    final path = Path()
      ..addRRect(
        RRect.fromLTRBR(
          nipSize,
          0,
          size.width,
          size.height,
          Radius.circular(radius),
        ),
      );

/// I can create the pin on the left side
    // final path2 = Path()
    //   ..lineTo(0, 2 * nipSize)
    //   ..lineTo(-nipSize, nipSize)
    //   ..lineTo(0, 0);
    //
    // path.addPath(path2, Offset(nipSize, size.height/2.7));
    return path;
  }

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

ErrorClipper的用法

PhysicalShape(
                  clipper: ErrorClipper(
                    errorBubbleType: ErrorBubbleType.leftEdge,
                  ),
                  elevation: 2,
                  color: theme.primaryColor,
                  shadowColor: Colors.grey.shade200,
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(16, 4, 16, 8),
                    child: Text(
                      context.l10n.pictureMissingError,
                      style: theme.textTheme.bodyText2,
                    ),
                  ),
                )

预期结果：

目前达到：

Answer 1

我是先移动路径，再绘制路径，

将第二条路径改为

    final path2 = Path()
      ..moveTo(nipSize * 2, 0)
      ..lineTo(nipSize * 3, -nipSize)
      ..lineTo(nipSize * 4, 0);

    path.addPath(path2, Offset.zero);

如何在 flutter 中使用 CustomClipper 在路径上绘制图钉

How to draw the pin on path with CustomClipper in flutter

flutter

widget

custom-painting