I currently have this code where I am trying to apply a specific type of corner to a container.

Eg.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 358,
          height: 177,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(30)),
            color: Color(0x6b000000),
            shape: BoxShape.rectangle,
          ),
        ),
      ),
    );
  }
}

What I want to do is not to have rounded corners but cut off corners in a container.

CodePudding user response：

You can use CustomPainter, first crate this class:

class CustomDraw extends CustomPainter {
  late Paint painter;

  CustomDraw(BuildContext buildContext, Color color) {
    painter = Paint()
      ..color = color
      ..style = PaintingStyle.fill;
  }

  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();

    path.moveTo(0, size.height * 0.2);
    path.lineTo(size.height * 0.2, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height * 0.8);
    path.lineTo(size.width - size.height * 0.2, size.height);
    path.lineTo(0, size.height);

    path.close();

    canvas.drawPath(path, painter);
  }

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

then use it like this:

Container(
   clipBehavior: Clip.antiAlias,
   decoration: BoxDecoration(),
   child: CustomPaint(
      size: Size(300, 100),
      painter: CustomDraw(context, Colors.red),
   ),
),

CodePudding user response：

here is the easiest way:

Material(
          clipBehavior: Clip.antiAlias,
          shape: const BeveledRectangleBorder(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  bottomRight: Radius.circular(20.0))),
          child: Container(
            height: 100,
            width: 100,
            decoration: const BoxDecoration(
              color: Colors.grey,
            ),
          ),
        ),

Output: