1

I'm trying to build a ticket shaped container in flutter like this: enter image description here

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

4 Answers 4

3

Use the following CustomClipper to create the shape then, inside the clipPath widget, call the constructor of this class CustomTicketShape().

The class is below:

class CustomTicketShape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      ..lineTo(0, size.height / 2 - 20)
      ..quadraticBezierTo(
          size.width * 0.10, size.height / 2, 0, size.height / 2 + 20)
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, size.height / 2 + 20)
      ..quadraticBezierTo(
          size.width * 0.90, size.height / 2, size.width, size.height / 2 - 20)
      ..lineTo(size.width, 0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}
2

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:

enter image description here

2

Try below code and Refer flutter_ticket_widget package

 FlutterTicketWidget(
          width: 400,
          height: 200,
          isCornerRounded: true,
          child: Container(
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Add your widget here',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
        ),

Your result screen-> image

Refer other packages fw_ticket, ticketview

1

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;
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.