How do I align the contents inside my container in Flutter? - flutter

Question

I have a few buttons that I've added inside this rounded container. I want to align alll go these in the middle. Originally when I added them they were perfectly aligned but when I changed the size of the text below the buttons the alignment got changed as well. Here is the code:
Stack(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(top: 290.0, left: 8, right: 8),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(16.0)),
),
height: 110,
),
),
Padding(
padding: const EdgeInsets.only(top: 110.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 198.0, left: 0),
child: Column(
children: <Widget>[
Container(
height: 50,
width: 50,
decoration: new BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFFFF8C3B),
const Color(0xFFFE524B)
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
color: Colors.orange,
shape: BoxShape.circle,
),
child: Icon(Entypo.login,
color: Colors.white)),
SizedBox(
height: 5,
),
Text('Sign In', style: TextStyle(
color: Color(0xFFFF8C3B),
fontFamily: "Netflix",
fontWeight: FontWeight.bold,
fontSize: 17)),
],
),
),
Padding(
padding:
const EdgeInsets.only(top: 198.0, left: 25),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 50,
width: 50,
decoration: new BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFFFF8C3B),
const Color(0xFFFE524B)
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
color: Colors.orange,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.only(
left: 2.0, top: 1),
child: Container(
child: Icon(Entypo.credit,
color: Colors.white)),
)),
SizedBox(
height: 5,
),
Text('Payments', style: TextStyle(
color: Color(0xFFFF8C3B),
fontFamily: "Netflix",
fontWeight: FontWeight.bold,
fontSize: 17)),
],
),
),
Padding(
padding:
const EdgeInsets.only(top: 198.0, left: 15),
child: Column(
children: <Widget>[
Container(
height: 50,
width: 50,
decoration: new BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFFFF8C3B),
const Color(0xFFFE524B)
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
color: Colors.orange,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Icon(Entypo.log_out,
color: Colors.white)),
)),
SizedBox(
height: 5,
),
Text('Sign Out', style: TextStyle(
color: Color(0xFFFF8C3B),
fontFamily: "Netflix",
fontWeight: FontWeight.bold,
fontSize: 17)),
],
),
),
Padding(
padding:
const EdgeInsets.only(top: 198.0, left: 20),
child: Column(
children: <Widget>[
Container(
height: 50,
width: 50,
decoration: new BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFFFF8C3B),
const Color(0xFFFE524B)
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
color: Colors.orange,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Icon(Entypo.info,
color: Colors.white)),
)),
SizedBox(
height: 5,
),
Text('About Us', style: TextStyle(
color: Color(0xFFFF8C3B),
fontFamily: "Netflix",
fontWeight: FontWeight.bold,
fontSize: 17)),
],
),
),
],
),
),
],
),
This is what the alignment looks like:

Answer 1

You can put the buttons in a row. And then, you can set MainAxisAlignment property to center.

Answer 2

Put the buttons in a row. And then, you can set MainAxisAlignment property to center.