文本小部件在没有中心小部件的情况下保持居中

Question

图片链接，因为我还不允许发布图片

我正在尝试创建一个应用程序，但即使我没有添加中心小部件，两个文本“你好和先生”也在中心，为什么它们之间有那么大的空间。 应用程序标题有一个巨大的底部填充，我不得不将其删除。 应用示例在上图中。 我只是想让两者在左上角相互堆叠，并减少它们之间的空间，这是我的代码：

    Container(
    child: SingleChildScrollView(
      padding: EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          Text(
            'Hello,',
            style: Theme.of(context)
                .textTheme.headline4
                .apply( color: Colors.grey),
          ),
          Text(
            "Mr. Udeinya",
            style: Theme.of(context)
                .textTheme
                .headline4
                .apply(color: Colors.deepOrange, fontWeightDelta: 2),
          ),

          Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.deepOrange,
                border: Border.all(
                  width: 3,
                  color: Colors.white,
                )
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Wallet Balance :',
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),

                Container(
                  width: double.infinity,
                )
              ],
            ),
          ),
        ],
      ),
    ),
  ),

和图像

图片链接，因为我还不允许发布图片

Answer 1

您的问题的一种解决方案是将列的 crossAxisAlignment 属性更改为 CrossAxisAlignment.start

我还建议，如果您打算将它们组合在一起，请将您的两个文本小部件本身放在一列中。

Container(
    child: SingleChildScrollView(
      padding: EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Hello,',
                style: Theme.of(context)
                    .textTheme
                    .headline4
                    .apply(color: Colors.grey),
              ),
              Text(
                "Mr. Udeinya",
                style: Theme.of(context)
                    .textTheme
                    .headline4
                    .apply(color: Colors.deepOrange, fontWeightDelta: 2),
              ),
            ],
          ),
          Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.deepOrange,
                border: Border.all(
                  width: 3,
                  color: Colors.white,
                )),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Wallet Balance :',
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),
                Container(
                  width: double.infinity,
                )
              ],
            ),
          ),
        ],
      ),
    ),
  )

像这样的东西？ 希望它有所帮助。

Answer 2

尝试使用文本小部件的文本对齐属性，您可以在链接中找到更多信息。 文本小部件文档

例子：

 Text("data,",textAlign: TextAlign.left,)

Answer 3

问题是您没有为最顶层的列提供 crossAxisAlignment，因此默认情况下，它是居中的。将此添加到最顶层的列

crossAxisAlignment: CrossAxisAlignment.start,