I have a page on which the container is located, I need to make borders and a cutout for the buttons in this container. I want to do this using ClipPath when I added this widget, nothing has changed, there are no borders and there is no vyzer that I registered. Tell me why nothing is displayed, what is my mistake?

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: CustomClipperArc(position: 150, holeRadius: 32),
      child: Container(
        decoration: const BoxDecoration(
          color: constants.Colors.greyXDark,
        ),
        padding: const EdgeInsets.only(top: 50),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SvgPicture.asset(
                  constants.Assets.likeBoarding,
                  height: 50,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

CustomClipperArc

class CustomClipperArc extends CustomClipper<Path> {
  CustomClipperArc({this.position, this.holeRadius = 16});

  double? position;
  final double holeRadius;

  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(position! - holeRadius, 0.0)
      ..lineTo(size.width, 0.0)
      ..lineTo(size.width, size.height)
      ..lineTo(position!, size.height)
      ..arcToPoint(
        Offset(position! - holeRadius, size.height),
        clockwise: false,
        radius: const Radius.circular(1),
      );

    path.lineTo(0.0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => oldClipper != this;
}

CodePudding user response：

Here is your Clip Code... and also use Shape Maker to design such layout and you will get clip code

Your clip container with border

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Stack(
    children: <Widget>[
      ClipPath(
        clipper: CustomClipPathTopContainer(),
        child: Container(
          height: 400,
          color: Colors.green,
        ),
      ),
      CustomPaint(
        painter: BorderPainter(),
        child: Container(
          height: 400,
        ),
      ),
    ],
  ),
),

Clipping Code of Container

import 'package:flutter/cupertino.dart';

class CustomClipPathTopContainer extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
    double w = size.width;
    double h = size.height;

    Path path0 = Path();
    path0.moveTo(0,size.height);
    path0.lineTo(0,0);
    path0.lineTo(size.width,0);
    path0.lineTo(size.width,size.height);
    path0.lineTo(size.width*0.3333333,size.height);
    path0.lineTo(size.width*0.3014833,size.height*0.9182714);
    path0.quadraticBezierTo(size.width*0.2795000,size.height*0.8617714,size.width*0.2488333,size.height*0.8552714);
    path0.quadraticBezierTo(size.width*0.2145667,size.height*0.8643571,size.width*0.1948583,size.height*0.9179714);
    path0.lineTo(size.width*0.1653417,size.height);
    path0.lineTo(0,size.height);
    path0.lineTo(0,size.height);
    path0.lineTo(0,size.height);
    path0.close();
    return path0;
  }

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

Making Border Painting

class BorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..color = Colors.pink;
    Path path0 = Path();
    path0.moveTo(0,size.height);
    path0.lineTo(0,size.height*0.2114714);
    path0.quadraticBezierTo(size.width*0.1255833,size.height*0.4277857,size.width*0.2698833,size.height*0.4275143);
    path0.cubicTo(size.width*0.4168083,size.height*0.4270286,size.width*0.5467250,size.height*0.0190429,size.width*0.6867167,size.height*0.0189000);
    path0.quadraticBezierTo(size.width*0.8293000,size.height*0.0211000,size.width,size.height*0.2121429);
    path0.lineTo(size.width,size.height);
    path0.lineTo(0,size.height);
    path0.lineTo(0,size.height);
    path0.lineTo(0,size.height*0.9994143);
    path0.close();
    canvas.drawPath(path0, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}