Question 74676 in Flutter Question posted in
The official Flutter documentation can be found here.

Container with 'diamond' shape in Flutter

the shape i need

Hello, I want to make Containers in Flutter with this shape, I want to be able to determine the height of the container, but have the right and left sides of it always with that ‘diamond’ shape

I tried playing around with box decoration options but I cant seem to achieve what Im looking for

Tags:

2

Answers


  1. 0

    You need to use CustomPainter to make that 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(),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0 
    class HexagonContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: HexagonClipper(),
      child: Container(
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}

class HexagonClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    double h = size.height;
    double w = size.width;
    double r = h / 2;

    path.moveTo(r, 0);
    path.lineTo(w - r, 0);
    path.lineTo(w, r);
    path.lineTo(w - r, h);
    path.lineTo(r, h);
    path.lineTo(0, r);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search