Padding and text on Icon Button - flutter - flutter

Question

I am creating a menu with IconButton, but I want to decrease the space between the buttons.
Currently It looks like this:
But I want this:
Also, I would like to know how to put the text below each button, just like the image. I have tried to use other types of button but didn't worked.
This is Menu.dart code:
import 'package:flutter/material.dart';
void main() => runApp(Menu());
class Menu extends StatefulWidget {
const Menu({super.key});
#override
State<Menu> createState() => _MenuState();
}
class _MenuState extends State<Menu> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 160, 244, 230),
elevation: 0,
),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 90),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color.fromARGB(255, 160, 244, 230), Color.fromARGB(255, 92, 172, 178)]
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Image.asset("assets/entrada.png"),
iconSize: 190,
onPressed: () {},
),
IconButton(
icon: Image.asset("assets/saida.png"),
iconSize: 190,
onPressed: () {},
),
IconButton(
icon: Image.asset("assets/categorias.png"),
iconSize: 190,
onPressed: () {},
)
]
)
)
);
}
}

Answer 1

First you need to build your custom button like this:
Widget customButton(
{required String image,
required String title,
required Function() onTap,
required Size size}) {
return GestureDetector(
onTap: onTap,
child: Container(
color: Colors.transparent,
child: Column(
children: [
Container(
height: size.height,
width: size.width,
constraints: BoxConstraints(maxHeight: 130, maxWidth: 130),
child: Image.asset(image),
),
Text(title),
],
),
),
);
}
then use it like this:
Padding(
padding: const EdgeInsets.symmetric(vertical: 32.0),
child: LayoutBuilder(builder: (context, constraints) {
var buttonMargin = 32.0;
var buttonSize = constraints.maxHeight / 3 - buttonMargin;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
customButton(
image: "assets/entrada.png",
title: 'some text',
onTap: () {},
size: Size(buttonSize, buttonSize),
),
Padding(
padding: EdgeInsets.symmetric(vertical: buttonMargin),
child: customButton(
image: "assets/saida.png",
title: 'some text 2',
onTap: () {},
size: Size(buttonSize, buttonSize),
),
),
customButton(
image: "assets/categorias.png",
title: 'some text 3',
onTap: () {},
size: Size(buttonSize, buttonSize),
),
],
);
}),
)