Flutter中如何将渐变文本居中对齐至行中间而非默认居左

问题根因 #

你的渐变文本默认左对齐的原因有两个：

1. 外层Column的crossAxisAlignment设置为CrossAxisAlignment.start，所有子元素默认沿水平方向左对齐
2. GradientText本身默认宽度适配内容，没有外层居中容器包裹，也没有设置居中属性

解决方案 #

方案1：仅让渐变文本居中，不影响其他组件布局（更推荐）

直接修改_loginGradientText方法，给GradientText外层套一个Center组件即可：

_loginGradientText() {
  return Center(
    child: GradientText('mySSC',
        gradient: LinearGradient(colors: [
          Color.fromRGBO(89, 46, 46, 0.8),
          Color.fromRGBO(89, 46, 46, 0.8),
        ],),
        style: TextStyle(fontFamily: 'Exo2',fontSize: 28, fontWeight: FontWeight.bold)),
  );
}

如果不想修改这个方法，也可以在调用位置直接包裹：

children: <Widget>[
  _socialButtons1(),
  Center(child: _loginGradientText()),
  SizedBox(height: size.getWidthPx(10)),
  _textAccount(),
  SizedBox(height: size.getWidthPx(30)),
  loginFields()
]

方案2：需要该Column下所有子组件都水平居中

直接修改Column的crossAxisAlignment属性为CrossAxisAlignment.center即可：

child: Column(
    crossAxisAlignment: CrossAxisAlignment.center, // 把原来的start替换为center
    children: <Widget>[
      _socialButtons1(),
      _loginGradientText(),
      SizedBox(height: size.getWidthPx(10)),
      _textAccount(),
      SizedBox(height: size.getWidthPx(30)),
      loginFields()
    ]),

内容的提问来源于stack exchange，提问作者jerome