how to draw a custom flutter border like this?

Question

I would like ideas for how to implement a custom border as shown in the image below.

Solution

I made a CustomPainter to draw the shape:

class MyPainter extends CustomPainter {
  Color color;
  MyPainter({@required this.color});
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    var path = Path();
    final double startPoint = size.width * 0.2;
    final double rheight = 30;
    path.moveTo(startPoint, rheight);
    path.lineTo(startPoint + 20, 0);
    path.lineTo(startPoint + 40, rheight);
    path.moveTo(0, rheight);
    path.lineTo(startPoint, rheight);
    path.moveTo(startPoint + 40, rheight);
    path.lineTo(size.width, rheight);
    path.lineTo(size.width, size.height);
    path.moveTo(0, rheight);
    path.lineTo(0, size.height);
    path.moveTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Usage:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: CustomPaint(
            painter: MyPainter(color: Colors.black.withOpacity(0.2)),
            child: Container(
              height: 300,
            )
          ),
        ),
      ),
    );
  }

Result:

Update: This is a curved edges version:

class MyPainter extends CustomPainter {
  Color color;
  MyPainter({@required this.color});
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    var path = Path();
    final double startPoint = size.width * 0.2;
    final double rheight = 30;
    path.moveTo(startPoint, rheight);
    path.lineTo(startPoint + 20, 5);
    path.cubicTo(startPoint + 23, 0, startPoint + 26, 0,
      startPoint + 29, 0);
    path.lineTo(startPoint + 50, rheight);
    path.moveTo(10, rheight);
    path.lineTo(startPoint, rheight);
    path.moveTo(startPoint + 50, rheight);
    path.lineTo(size.width - 10, rheight);
    path.cubicTo(size.width, rheight + 5, size.width, rheight + 10,
        size.width, rheight + 15);
    path.lineTo(size.width, size.height - 15);
    path.moveTo(10, rheight);
    path.cubicTo(0, rheight + 5, 0, rheight + 10,
        0, rheight + 15);
    path.lineTo(0, size.height - 10);
    path.cubicTo(5, size.height, 10, size.height,
        15, size.height);
    path.moveTo(15, size.height);
    path.lineTo(size.width - 10, size.height);
    path.cubicTo(size.width, size.height - 5, size.width, size.height - 10,
        size.width, size.height - 15);
    path.moveTo(size.width - 5, size.height);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Result:

Comments

[pskink]

stackoverflow.com/a/57943257/2252830

[Sóstenes Gomes]

Hi. Thanks for your reply, it helped me a lot. How could you leave the corners rounded at 5px and the arrow with the rounded tip at 3px?

[Mobina]

I've updated my answer. Hope it helps again. @SóstenesGomes