Flutter 中的设计箭头

Question

我正在尝试在 Flutter 中设计。我不知道如何在容器中设计这个箭头。

Answer 1

您可以为此使用 CustomPainer 或 ClipPath。您也可以检查 this answer 这种布局。

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;
}

并使用

  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),
                  ),
                ),
              ),
            ),

结果

更多关于CustomPaint

Flutter 中的设计箭头

Design arrow in Flutter

flutter-layout