Почему значки-кнопки не центрированы?

Question

Я работаю над приложением Flutter и не могу понять, почему мои кнопки-значки не центрированы по центру страницы. Я завернул свой код в Center()

Это моя страница:

https://imgur.com/a/YlCW3Xu

Это мой код:

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,
              ),
            ],
          )),
        ],
      )),
    );
  }
}

Я удалил поле текстов, чтобы код соответствовал. Я надеюсь, что вы можете помочь мне, Спасибо за вашу помощь!

Answer 1

В основном Center() виджет центрирует только саму строку, а не виджеты внутри строки. Чтобы выровнять дочерних элементов в вашем ряду, используйте mainAxisAlignment: MainAxisAlignment.center для горизонтального выравнивания и crossAxisAlignment: CrossAxisAlignment.center для вертикального выравнивания, см. Больше здесь

поэтому для вашего кода это будет:

`  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 2

Несколько изменений:

• Добавьте shrinkWrap true к вашему ListView

  ListView(
    shrinkWrap: true,
    ...
  

• Добавьте mainAxisAlignment MainAxisAlignment.center к вашему Row

  new Center(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new IconButton( 
                ...