Flutter中如何让文本从同一左侧边缘对齐？

要让“Login”和“Sign in to continue”文本从同一左侧边缘对齐，只需调整内层Column的对齐属性，具体修改如下：

修改后的代码 #

mainAxisAlignment: MainAxisAlignment.start,
children: [
  const SizedBox(
    width: double.infinity,
    height: 200,
  ),
  const Divider(
    thickness: 3,
    color: Colors.white,
    indent: 160,
    endIndent: 160,
  ),
  Container(
    decoration: const BoxDecoration(
      color: Color.fromRGBO(32, 32, 32, 1),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(8),
        topRight: Radius.circular(8),
      ),
    ),
    width: double.infinity,
    height: MediaQuery.of(context).size.height,
    child: Align(
      alignment: Alignment.topLeft,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 10.0),
            // 核心调整：给内层Column设置左侧对齐
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Login',
                  style: GoogleFonts.inter(
                    textStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 32,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                Text(
                  'Sign in to continue',
                  style: GoogleFonts.inter(
                      color: Color.fromRGBO(161, 161, 161, 1),
                      fontSize: 24,
                      fontWeight: FontWeight.w300),
                )
              ],
            ),
          )
        ],
      ),
    ),
  ),
],

调整说明 #

• 原代码中包裹两个文本的Column默认使用CrossAxisAlignment.center，导致不同宽度的文本会居中对齐，出现左侧偏移。添加crossAxisAlignment: CrossAxisAlignment.start后，子元素会强制沿左侧对齐，解决偏移问题。
• 可移除Login文本的textAlign: TextAlign.start，因为crossAxisAlignment已经控制了整体对齐方向，无需单独设置文本内部对齐。

内容的提问来源于stack exchange，提问作者fysikal-iwnl