Flutter Dart代码运行出现Bottom overflow by 283 pixels报错如何解决？

问题根因 #

你的布局溢出是因为最外层Column的内容总高度超过了当前设备的屏幕可视高度：代码中使用了大量固定高度的SizedBox（比如顶部100px的内边距、两个标题区和白色容器之间100px的间距、表单下方40px、30px、110px的固定间距等），在小尺寸手机、横屏模式下，固定高度的内容加总后超出屏幕边界，且白色容器内的Column没有滚动能力，就会触发底部溢出报错。

修复方案 #

推荐优先级从高到低如下：

• 方案1：给白色容器内的内容加滚动能力，是登录类页面最常用的修复方案
  把Expanded包裹的白色容器里的Column外层套一层SingleChildScrollView即可，外层已经有Expanded限制最大高度，不会出现无限高度的异常，同时弹出软键盘时也能自动适配不会溢出。
  核心修改代码参考：

  Expanded(
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(60),
          topRight: Radius.circular(60),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.only(top: 80.0, right: 50, left: 50),
        // 新增SingleChildScrollView包裹原有Column
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(), // 可选，加iOS风格的弹性滚动效果
          child: Column(
            // 原有Column内的所有表单、按钮、文本内容保持不变即可
            ...
          ),
        ),
      ),
    ),
  )
  

• 方案2：替换固定高度的间距为适配屏幕的动态值
  把所有写死的SizedBox高度改为通过屏幕高度比例计算，比如用SizedBox(height: MediaQuery.of(context).size.height * 0.1)替换原来的SizedBox(height: 100)，不同尺寸的设备会自动适配间距，不会出现内容超出的情况。
• 方案3：用Spacer自动分配剩余空间
  如果不需要页面滚动，可以把固定高度的SizedBox替换为对应权重的Spacer，系统会自动分配剩余的屏幕空间给所有Spacer，保证所有内容刚好适配当前屏幕高度。

额外注意 #

如果测试时发现软键盘弹出后页面仍有异常，可以在Scaffold的属性中设置resizeToAvoidBottomInset: true（默认就是true，如手动改过改回来即可），配合滚动组件就能完全适配软键盘弹出的场景。

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