CustomClipper and CustomPainter in Flutter

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ClipPath(
            clipper: ArrowEnd(),
            child: Container(
              width: 800,
              height: 400,
              color: Colors.red,
              child: CustomPaint(
                painter: ArrowEndPainter(20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ArrowEnd extends CustomClipper<Path> {
  ArrowEnd();

  @override
  Path getClip(Size size) {
    Path path = Path();

    // Path number 1

    path = Path();
    path.lineTo(size.width * 0.15, 0);
    path.cubicTo(size.width * 0.15, 0, 0, 0, 0, 0);
    path.cubicTo(0, 0, 0, size.height, 0, size.height);
    path.cubicTo(0, size.height, size.width * 0.15, size.height,
        size.width * 0.15, size.height);
    path.cubicTo(size.width * 0.24, size.height, size.width * 0.3,
        size.height * 0.98, size.width * 0.34, size.height * 0.96);
    path.cubicTo(size.width * 0.37, size.height * 0.94, size.width * 0.76,
        size.height * 0.68, size.width * 0.95, size.height * 0.55);
    path.cubicTo(size.width * 0.95, size.height * 0.55, size.width,
        size.height * 0.53, size.width, size.height / 2);
    path.cubicTo(size.width, size.height * 0.47, size.width * 0.95,
        size.height * 0.44, size.width * 0.95, size.height * 0.44);
    path.cubicTo(size.width * 0.76, size.height * 0.32, size.width * 0.36,
        size.height * 0.06, size.width * 0.34, size.height * 0.04);
    path.cubicTo(size.width * 0.3, size.height * 0.02, size.width * 0.24, 0,
        size.width * 0.15, 0);
    path.cubicTo(
        size.width * 0.15, 0, size.width * 0.15, 0, size.width * 0.15, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldDelegate) {
    return true;
  }
}

class ArrowEndPainter extends CustomPainter {
  ArrowEndPainter(this.width);

  final double width;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..strokeWidth = width
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round;
    // Path number 1
    final path = Path();
    path.lineTo(size.width * 0.15, 0);
    path.cubicTo(size.width * 0.15, 0, 0, 0, 0, 0);
    path.cubicTo(0, 0, 0, size.height, 0, size.height);
    path.cubicTo(0, size.height, size.width * 0.15, size.height,
        size.width * 0.15, size.height);
    path.cubicTo(size.width * 0.24, size.height, size.width * 0.3,
        size.height * 0.98, size.width * 0.34, size.height * 0.96);
    path.cubicTo(size.width * 0.37, size.height * 0.94, size.width * 0.76,
        size.height * 0.68, size.width * 0.95, size.height * 0.55);
    path.cubicTo(size.width * 0.95, size.height * 0.55, size.width,
        size.height * 0.53, size.width, size.height / 2);
    path.cubicTo(size.width, size.height * 0.47, size.width * 0.95,
        size.height * 0.44, size.width * 0.95, size.height * 0.44);
    path.cubicTo(size.width * 0.76, size.height * 0.32, size.width * 0.36,
        size.height * 0.06, size.width * 0.34, size.height * 0.04);
    path.cubicTo(size.width * 0.3, size.height * 0.02, size.width * 0.24, 0,
        size.width * 0.15, 0);
    path.cubicTo(
        size.width * 0.15, 0, size.width * 0.15, 0, size.width * 0.15, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}