How to create Hexagon shape Container with flutter same this photo

Question

How to create Hexagon shape Container with flutter same this photo

Answer 1

It can be archived by using Stack and Container 's decoration using bottomLeft .

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink.shade100,
        elevation: 0,
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          final boxheight = constraints.maxHeight / 6;
          return Stack(
            children: [
              //4th container
              Container(
                height: boxheight * 4 + kToolbarHeight,
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(
                  color: Colors.deepPurple,
                  borderRadius: border,
                ),
                child: clickTest(4),
              ), //3rd container
              Container(
                height: boxheight * 3 + kToolbarHeight,
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: border,
                ),
                child: clickTest(3),
              ), //second container
              Container(
                height: boxheight * 2 + kToolbarHeight,
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(
                  color: Colors.pink.shade300,
                  borderRadius: border,
                ),
                child: clickTest(2),
              ),
              // top container
              Container(
                alignment: Alignment.bottomCenter,
                height: boxheight,
                decoration: BoxDecoration(
                  color: Colors.pink.shade100,
                  borderRadius: border,
                ),
                child: clickTest(1),
              ),
            ],
          );
        },
      ),
    );
  }
}