无法在屏幕中间水平对齐容器

Question

所需的结果是将容器对准屏幕中间。垂直对齐完成。但是没有发生水平对齐。

我希望crossAxisAlignment.center能解决这个问题。

所需结果：

当前结果：

return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          child: Text(
            'Failed to login. Try again later.',
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
          decoration: BoxDecoration(
            color: Colors.red[800],
          ),
          padding: EdgeInsets.symmetric(vertical: 100, horizontal: 30),
        ),
      ],
    );

Answer 1

您需要使用Center小部件包装容器。

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Center(
      child: Container(
        child: Text(
          'Failed to login. Try again later.',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        decoration: BoxDecoration(
          color: Colors.red[800],
        ),
        padding:
            EdgeInsets.symmetric(vertical: 100, horizontal: 30),
      ),
    ),
  ],
),