How to create Hexagon shape Container with flutter same this photo - flutter

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.
class AWT extends StatefulWidget {
AWT({Key? key}) : super(key: key);
#override
_AWTState createState() => _AWTState();
}
class _AWTState extends State<AWT> {
final border = const BorderRadius.only(
bottomLeft: Radius.circular(140),
);
clickTest(int index) => OutlinedButton(
onPressed: () {
print("tap Event from $index");
},
child: Text("Click test"));
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
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),
),
],
);
},
),
);
}
}