Flutter中如何将页面最后一张图片固定对齐到底部？

固定高度的SizedBox无法适配不同设备的屏幕尺寸，这就是导致布局溢出或位置偏移的原因。要让最后一张图片始终贴在屏幕底部，应该利用Flutter的弹性布局组件自动分配剩余空间，替代固定高度的空白占位。

修改后的代码如下：

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.amber,
        child: Column(
          children: <Widget>[
            // 顶部图片适配屏幕宽度，避免溢出
            Image.asset(
              "imagens/btop.png",
              width: double.infinity,
              fit: BoxFit.fitWidth,
            ),
            const SizedBox(
              width: 200,
              height: 200,
              child: Image.asset("imagens/logo.png"),
            ),
            const SizedBox(height: 40),
            // 自动填充剩余垂直空间，将底部图片推到底部
            const Spacer(),
            // 底部图片适配屏幕宽度
            Image.asset(
              "imagens/bbot.png",
              width: double.infinity,
              fit: BoxFit.fitWidth,
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明：

• 用Spacer()替代固定高度的SizedBox：它会自动占据Column中未被其他组件占用的垂直空间，确保底部图片始终贴合屏幕底部，完美适配所有设备尺寸。
• 给图片添加适配属性：width: double.infinity配合fit: BoxFit.fitWidth，让图片宽度自适应屏幕，避免因图片尺寸过大导致的像素溢出问题。
• 修正构造器：添加super.key符合Flutter组件最佳实践。

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