Flutter实现屏幕底部居中文本：在按钮与屏幕底部间居中

要让文本在按钮与屏幕底部之间居中，通过Spacer组件分配剩余空间即可实现，修改后的代码如下：

Column(
  mainAxisSize: MainAxisSize.max,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Align(
      alignment: Alignment.center,
      child: Text(
        "or",
        style: TextStyle(fontSize: 16, color: Colors.black),
      ),
    ),
    Container(
      margin: const EdgeInsets.only(top: 10),
      width: MediaQuery.of(context).size.width,
      child: ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(backgroundColor: const Color(0xFFD9D9D9), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),
          child: const Padding(
            padding: EdgeInsets.symmetric(vertical: 12.0),
            child: Text(
              "Continue",
              style: TextStyle(fontSize: 16, color: Colors.black),
            ),
          )),
    ),
    const SizedBox(height: 20),
    // 填充按钮到文本上方的剩余空间
    const Spacer(),
    const Align(
      alignment: Alignment.center,
      child: Text(
        "Don’t have an account? Sign up",
        style: TextStyle(fontSize: 16, color: Color(0x80000000)),
      ),
    ),
    // 填充文本到屏幕底部的剩余空间
    const Spacer(),
  ],
);

关键说明： #

• 原代码用固定高度的SizedBox只能维持文本与按钮的固定间距，无法适配不同屏幕实现居中效果。
• Spacer会自动占据Column主轴方向的剩余空间，两个Spacer会均分按钮下方到屏幕底部的空间，让文本正好处于该区域的中间位置。
• 将文本的alignment从Alignment.bottomCenter改为Alignment.center，确保文本在自身区域内居中对齐。

内容的提问来源于stack exchange，提问作者Tuần