Recreating this layout in flutter - flutter

Question

I want to make this layout in flutter:
Layout
It consists of five buttons in which the fifth button is on the middle of the other four and gives a illusion that the other buttons are not rectangles.
Is this even possible in flutter? Some guidelines would be welcome.
Thanks.

Answer 1

You can do it using Stack widget to position the Circle button at the center.
This is an example I made:
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey[800],
body: Center(
child: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyButton(),
MyButton(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyButton(),
MyButton(),
],
),
],
),
Center(
child: MyCircleButton(),
),
],
),
),
);
}
}
class MyButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: 120,
margin: EdgeInsets.all(5),
height: 120,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
print("On click");
},
),
),
);
}
}
class MyCircleButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(60.0)),
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10.0),
),
child: Material(
color: Colors.transparent,
child: InkWell(
highlightColor: Colors.red,
onTap: () {
print("On circle click");
},
),
),
),
);
}
}
Try reading more about Flutter layouts, here you have a lot of information : https://flutter.dev/docs/development/ui/layout