Flutter How to create box container with arrow on top?

Question

Hi how do i create box container with arrow on top without using any pub packages.

Like below.

Answer 1

You can customize ShapeBorder similar to this post. Then instead of using rect.bottomCenter for Path(), change it to rect.TopCenter to place the drawn Rect at the top.

Path()dart
  ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 2)))
  ..moveTo(rect.topCenter.dx - 10, rect.topCenter.dy)
  ..relativeLineTo(10, 20)
  ..relativeLineTo(20, -20)
  ..close();