Why are Icon-Buttons not centered? - user-interface

Question

I'm working on a Flutter application and I can't figure out why my icon-buttons are not centered in the middle of the page.
I wrapped my code in a Center()
This is my page :
https://imgur.com/a/YlCW3Xu
This is my code:
import "package:flutter/material.dart";
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class LogInScreen extends StatefulWidget {
#override
_LogInScreenState createState() => new _LogInScreenState();
}
class _LogInScreenState extends State<LogInScreen> {
String _email, _password;
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Center(
child: ListView(
children: <Widget>[
Column(children: <Widget>[
new Container(
padding: (EdgeInsets.only(top: 50)),
child: Text(
"Sign In",
style: TextStyle(
fontSize: 40,
),
),
),
new Container(
padding: (EdgeInsets.only(top: 50, left: 35, right: 35)),
child: Column(children: <Widget>[
new Form(
child: new Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20),
child: new RaisedButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: const Text('Login'),
),
),
])),
])),
new Container(
padding: EdgeInsets.only(top: 40),
child: Column(
children: <Widget>[
new Text("Or login with"),
],
),
),
]),
new Center(
child: new Row(
children: <Widget>[
new IconButton(
icon: Icon(FontAwesomeIcons.facebookF),
color: Colors.blue,
),
new IconButton(
icon: Icon(FontAwesomeIcons.google),
color: Colors.blue,
),
],
)),
],
)),
);
}
}
I removed the texts field so the code would fit.
I hope you can help me,
Thank you for your help !

Answer 1

Set the padding for IconButton to 0, like so:
IconButton(
padding: EdgeInsets.zero,
...
)

Answer 2

None of the listed solution will work. The Only solution for me is to put IconButton inside SizedBox.
SizedBox(
width: double.infinity,
child: IconButton(
icon: FaIcon(FontAwesomeIcons.moneyBillWave),
iconSize: 80,
onPressed: () {},
),
),

Answer 3

A few changes :
Add shrinkWrap true to your ListView
ListView(
shrinkWrap: true,
...
Add mainAxisAlignment MainAxisAlignment.center to your Row
new Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
...

Answer 4

Basically Center() widget only center the row itself not the widgets within the row.
To align children in your row use mainAxisAlignment: MainAxisAlignment.centerfor horizontal alignment and crossAxisAlignment: CrossAxisAlignment.center for Vertical alignment see more here
so for your code it would be:
` new Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center
children: <Widget>[
new IconButton(
icon: Icon(FontAwesomeIcons.facebookF),
color: Colors.blue,
),
new IconButton(
icon: Icon(FontAwesomeIcons.google),
color: Colors.blue,
),
],
)),`

Answer 5

You don't need Center the icon because the problem was the Icon it self. Maybe the icon design contained padding or margin. My problem is on back button:
Container(
color: Colors.lightGreen,
child: Icon(
Icons.arrow_back_ios,
color: Colors.black,
size: 15,
),
),
When i change to Icons.arrow_back_ios_new, it back to normal:
Container(
color: Colors.lightGreen,
child: Icon(
Icons.arrow_back_ios_new,
color: Colors.black,
size: 15,
),
),
You need to find an icon that contained no padding/margin.