ProblemTransform + ClipPath

problem_transform.dart

// ignore_for_file: cascade_invocations, avoid_print

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: 320,
        child: ListView.builder(
          itemBuilder: (_, index) {
            if (index == 0) {
              return RowItem(
                ontap: () {
                  print('cick $index');
                },
              );
            }
            return Transform.translate(
              offset: Offset(0, -50 * index.toDouble()),
              child: RowItem(
                ontap: () {
                  print('cick $index');
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

class RowItem extends StatelessWidget {
  const RowItem({
    this.ontap,
    super.key,
  });

  final VoidCallback? ontap;

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: MyClipper(),
      child: GestureDetector(
        onTap: ontap,
        child: Container(
          height: 250,
          color: Colors.red,
        ),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  double radio = 40;
  @override
  Path getClip(Size size) {
    final w = size.width;
    final h = size.height;
    final r2 = radio / 2;

    const esp = 20.0;
    final path = Path();
    path.moveTo(w - r2 - esp, -50);
    path.lineTo(w - r2, 0);
    path.arcToPoint(
      Offset(w, r2),
      radius: Radius.circular(r2),
    );
    path.lineTo(w, h - r2 - esp - r2 - r2);
    path.arcToPoint(
      Offset(w - r2, h - r2 - esp - r2),
      radius: Radius.circular(r2),
    );
    path.lineTo(w - r2 - esp, h - r2 - esp - r2);
    path.arcToPoint(
      Offset(w - r2 - esp - r2, h - r2 - esp),
      radius: Radius.circular(r2),
      clockwise: false,
    );
    path.lineTo(w - r2 - esp - r2, h - r2);
    path.arcToPoint(
      Offset(w - r2 - esp - r2 - r2, h),
      radius: Radius.circular(r2),
    );
    path.lineTo(radio, h);
    path.arcToPoint(
      Offset(0, h - radio),
      radius: Radius.circular(radio),
    );
    path.lineTo(0, r2 + esp + r2 + radio);
    path.arcToPoint(
      Offset(radio, r2 + esp + r2),
      radius: Radius.circular(radio),
    );
    path.lineTo(w - r2 - esp - r2 - r2, r2 + esp + r2);
    path.arcToPoint(
      Offset(w - r2 - esp - r2, r2 + esp),
      radius: Radius.circular(r2),
      clockwise: false,
    );
    path.lineTo(w - r2 - esp - r2, r2);
    path.arcToPoint(
      Offset(w - r2 - esp, 0),
      radius: Radius.circular(r2),
    );
    return path;
  }

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