flutter - Flutter 中形状为 'diamond' 的容器

Question

the shape i need

你好，我想在 Flutter 中制作具有这种形状的容器，我希望能够确定容器的高度，但它的右侧和左侧始终具有“菱形”形状

我尝试使用盒子装饰选项，但我似乎无法实现我想要的

Answer 1

您需要使用 CustomPainter 来制作该 ui

class HexagonPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    final path = Path()
      ..moveTo(size.width * 0.25, 0)
      ..lineTo(size.width * 0.75, 0)
      ..lineTo(size.width, size.height * 0.5)
      ..lineTo(size.width * 0.75, size.height)
      ..lineTo(size.width * 0.25, size.height)
      ..lineTo(0, size.height * 0.5)
      ..close();

    canvas.drawPath(path, paint);
  }

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

class HexagonShape extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      height: 100,
      child: CustomPaint(
        painter: HexagonPainter(),
      ),
    );
  }
}