Design arrow in Flutter

Question

I'm trying to design in Flutter. I don't know how to design this arrow in container.

Answer 1

You can use CustomPainer or ClipPath for this. You can also check this answer for this kind of layout.

class PriceTagPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.fill;

    Path path = Path();

    path
      ..lineTo(size.width * .85, 0) // .85 amount of right gap
      ..lineTo(size.width, size.height / 2)
      ..lineTo(size.width * .85, size.height)
      ..lineTo(0, size.height)
      ..lineTo(0, 0)
      ..close();
    canvas.drawPath(path, paint);
  }

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

And use

  SizedBox(
              height: 100,
              width: 250,
              child: CustomPaint(
                painter: PriceTagPaint(),
                child: Align(
                  alignment: Alignment(-.2, 0), //litle left
                  child: Text(
                    "-11% Off",
                    style: TextStyle(
                        fontSize: 44,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),

Result

More about CustomPaint