How to create a custom container with sharp edges in flutter?-CodePudding

I'm trying to create a custom container with sharp edges, but I can't make the corners sharp.

CodePudding user response：

Use ClipPath and Custom Clipper Like this And use this Shape Maker website to design such Layout and you will get path code

ClipPath(
  clipper: CustomClipPath(),
  child: Container(
    height: 12.h,
    color: Colors.blue,
   ),
 ),

class CustomClipPath extends CustomClipper<Path> {

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

    final path = Path();
    Path path0 = Path();
    path0.moveTo(0,size.height*0.8542000);
    path0.lineTo(0,0);
    path0.lineTo(size.width,0);
    path0.lineTo(size.width*0.9341667,size.height*0.0728571);
    path0.lineTo(size.width,size.height*0.1400000);
    path0.lineTo(size.width*0.9350000,size.height*0.2128571);
    path0.lineTo(size.width,size.height*0.2857143);
    path0.lineTo(size.width*0.9350000,size.height*0.3557143);
    path0.lineTo(size.width,size.height*0.4300000);
    path0.lineTo(size.width*0.9350000,size.height*0.5000000);
    path0.lineTo(size.width*0.9991667,size.height*0.5728571);
    path0.lineTo(size.width*0.9341667,size.height*0.6414286);
    path0.lineTo(size.width,size.height*0.7171429);
    path0.lineTo(size.width*0.9333333,size.height*0.7871429);
    path0.lineTo(size.width*0.9991667,size.height*0.8542857);
    path0.lineTo(0,size.height*0.8542000);
    path0.close();
    return path0;
  }

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

CodePudding user response：

You can using CustomPaint to draw this sharp.

https://api.flutter.dev/flutter/widgets/CustomPaint-class.html