Flutter how do I position this text and icon in a row? - flutter

Question

I'm having trouble aligning my text and my icons.
Here's what my output looks like:
I wanted the text to be in the middle left side of the icons.
I've tried adding margins and padding. But the icons just wont align with the text, I even tried placing the icons in a different widget.
Here's my code:
Widget buildFollowText() {
return Padding(
padding: EdgeInsets.only(
left: 5,
top: 5,
),
child: Container(
child: Column(children: [
Padding(
padding: EdgeInsets.only(
left: 0,
right: 250,
),
child: Text(
'or follow us on:',
style: TextStyle(
fontFamily: "DMSans",
fontSize: 15,
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
color: Colors.grey,
),
),
),
Container(
width: 50,
height: 30.0,
margin: EdgeInsets.only(
right: 70,
bottom: 10,
),
child: buildIcons(),
)
])));
}
Widget buildIcons() {
return Padding(
padding: EdgeInsets.only(
top: 0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: new Padding(
padding: const EdgeInsets.only(bottom: 50.0),
child: Icon(
MdiIcons.facebook,
color: Colors.blue,
size: 50,
),
),
),
Expanded(
child: new Padding(
padding: const EdgeInsets.only(bottom: 50.0, left: 40),
child: Icon(
MdiIcons.twitter,
color: Colors.blue,
size: 50,
),
),
)
]));
}

Answer 1

remove the padding.
set mainAxisAlignment center for the column.
Wrap the Text('or follow us on') with Row() and set mainAxisAlignment.center.
Follow this code.
Padding(
padding: EdgeInsets.only(
left: 5,
top: 5,
),
child: Container(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'or follow us on:',
style: TextStyle(
fontFamily: "DMSans",
fontSize: 15,
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
color: Colors.grey,
),
),
],
),
Container(
width: 50,
height: 30.0,
margin: EdgeInsets.only(
right: 70,
bottom: 10,
),
child: buildIcons(),
)
],
),
),
),

Answer 2

Scaffold(
body: Container(
child: Row(
children: [
// text container
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text('or follow us on:'),
],
),
),
// icon container
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.face,
color: Colors.blue,
size: 30,
),
Icon(
Icons.transfer_within_a_station_rounded,
color: Colors.blue,
size: 30,
)
],
),
],
),
)
],
),
),
)

Answer 3

check below code
Container(
child: Column(
children: [
// text container
Container(
alignment: Alignment.centerLeft,
child: Text('or follow us on:'),
),
// icon container
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.face,
color: Colors.blue,
size: 30,
),
Icon(
Icons.transfer_within_a_station_rounded,
color: Colors.blue,
size: 30,
)
],
),
)
],
),
);