flutter - Flutter 如何创建价格标签形状的盒子容器

Question

如何在颤振容器中创建这个角形卡片视图..

Answer 1

您可以通过多种方式归档它，使用

• 集装箱装饰
• 剪辑路径
• 自定义油漆

这是一个使用 CustomPaint 的演示，你可以按照自己喜欢的方式修改值。

结果

画家

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

    Path path = Path();

    path
      ..moveTo(0, size.height * .5)
      ..lineTo(size.width * .13, 0)
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width * .13, size.height)
      ..lineTo(0, size.height * .5)
      ..close();
    canvas.drawPath(path, paint);

    //* Circle
    canvas.drawCircle(
      Offset(size.width * .13, size.height * .5),
      size.height * .15,
      paint..color = Colors.white,
    );
  }

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

并使用

SizedBox(
      height: 100,
      width: 300,
      child: CustomPaint(
        painter: PriceTagPaint(),
        child: Center(
          child: Text(
            "Coolant",
            style: TextStyle(
              fontSize: 44,
            ),
          ),
        ),
      ),
    );

检查 dartpad或gist