I'm trying to build a ticket shaped container in flutter like this:

I'm trying to use the ClipPath widget but I don't know how to get the path right.

CodePudding user response：

You can either use a CustomeClipper or a Stack to get this ticket shape. See the below code to get this shape using Stack:

Stack(
alignment: Alignment.center,
 children: [
    Container(
       height: 100,
       width: 200,
       color: Colors.black,
    ),
    Positioned(
      left: -5,
      child: Container(
               height: 20,
               width: 20,
               decoration: const BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle
                    ),
              )),
   Positioned(
     right: -5,
     child: Container(
               height: 20,
               width: 20,
               decoration: const BoxDecoration(
                 color: Colors.white,
                 shape: BoxShape.circle
                 ),
               )),
            ],
          )

Output:

CodePudding user response：

Try below code and Refer

Refer other packages fw_ticket, ticketview

CodePudding user response：

I got this to work in the end by following this : https://www.flutterclutter.dev/flutter/tutorials/how-to-cut-a-hole-in-an-overlay/2020/510/

class SCticketShape extends StatelessWidget {
  const SCticketShape({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipPath(
        clipper: CustomTicketShape(),
        child: Container(
        color: Colors.lightBlue,
          height: 0.3.sh,
          width: 0.9.sw,
        ),
      );
  }
}

class CustomTicketShape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.addRRect(
      RRect.fromRectAndRadius(
      Rect.fromLTWH(0, 0, size.width, size.height), 
      Radius.circular(8)));
      path.addOval(
        Rect.fromCircle(
          center: Offset(0, (size.height/3) *1.8), 
          radius: 15));
      path.addOval(
        Rect.fromCircle(
          center: Offset(size.width, (size.height/3) *1.8), 
          radius: 15));
      path.fillType = PathFillType.evenOdd;
  return path;
  }

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