Flutter应用开发问题：如何将Logo固定在屏幕底部且不影响居中元素

直接调整布局结构就能解决问题，核心思路是用Spacer填充中间元素上下的空白，确保登录核心元素始终垂直居中，同时把图片固定在屏幕底部：

1. 把登录相关的核心元素（标题、输入框、按钮）单独封装成一个Column，保留原有样式和内部间距。
2. 在这个核心Column的上下各添加一个Spacer(flex: 1)，让它们平分剩余空间，强制中间元素保持居中。
3. 将底部图片放在整个大Column的最后，它会被下方的Spacer推到屏幕底部，不会干扰中间元素的位置。

修改后的完整代码：

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(children: [
          // 顶部填充空间，和下方Spacer配合让中间元素居中
          const Spacer(flex: 1),
          // 核心登录元素，保留原有布局
          Column(children: [
            const SizedBox(height: 10),
            Text(
              '(REDACTED)',
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 25,
              ),
              key: const Key("bigText"),
            ),
            const SizedBox(height: 10),
            const Text(
              'Welcome Back!',
              style: TextStyle(
                fontSize: 24,
              ),
            ),
            const SizedBox(height: 20),
            // 用户名输入框
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  border: Border.all(color: Colors.white),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Padding(
                  padding: EdgeInsets.only(left: 30.0),
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'Username'),
                  ),
                ),
              ),
            ),

            const SizedBox(height: 15),
            // 密码输入框
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  border: Border.all(color: Colors.white),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Padding(
                  padding: EdgeInsets.only(left: 30.0),
                  child: TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'Password'),
                  ),
                ),
              ),
            ),

            const SizedBox(height: 25),

            // 登录按钮
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40.0),
              child: GestureDetector(
                //onTap: signOn(),
                child: Container(
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.cyan,
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: const Center(
                    child: Text('Sign In',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        )),
                  ),
                ),
              ),
            ),
          ]),
          // 底部填充空间，把图片推到屏幕底部
          const Spacer(flex: 1),
          // 底部图片
          Image.asset(
            'assets/FMJ.png',
            height: 100,
          ),
        ]),
      ),
    );
  }
}

为什么这么改？ #

原来用MainAxisAlignment.center是让整个Column里的所有元素（包括图片）一起居中，所以添加图片后会把中间元素往上挤压。用Spacer后，上下的空白空间被自动填充，中间的登录元素被两个Spacer夹在中间，始终保持垂直居中，底部图片直接贴在屏幕底部，完全不影响中间元素的位置。

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