Flutter模态底部弹窗用SingleChildScrollView遇RenderBox未布局错误

问题原因 #

你代码里的Spacer组件是触发错误的核心原因。Spacer依赖父容器有确定的可用空间来分配剩余空间，但SingleChildScrollView的高度是无限延伸的（因为它支持滚动），没有固定的可用空间给Spacer计算尺寸，直接触发了Flutter布局断言错误。

解决方案 #

移除const Spacer()，改用固定间距组件（比如SizedBox）来控制按钮区域和上方组件的距离。如果需要让按钮始终靠弹窗底部，可以结合Column的mainAxisSize: MainAxisSize.min调整布局。

修改后的核心代码片段 #

// 移除const Spacer()，替换为固定高度的SizedBox
const SizedBox(height: 20),
Container(
  margin: const EdgeInsets.fromLTRB(0, 5, 0, 15),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      FilledButton(
        onPressed: _submitExpenseData,
        child: const Text('Save Expense'),
      ),
      TextButton(
        onPressed: () {
          Navigator.pop(context);
        },
        child: const Text('Cancel'),
      ),
    ],
  ),
),

若需按钮固定在弹窗底部的优化方案 #

return SingleChildScrollView(
  child: Padding(
    padding: EdgeInsets.fromLTRB(
        16, width < 450 ? 70 : 10, 16, keyboardSpace + 16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min, // 让Column仅占用子组件所需高度
      children: [
        // 上方输入框、日期选择器、下拉框等组件
        
        // 用固定间距+Align确保按钮区域靠底
        const SizedBox(height: 20),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            width: double.infinity,
            margin: const EdgeInsets.fromLTRB(0, 5, 0, 15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                FilledButton(
                  onPressed: _submitExpenseData,
                  child: const Text('Save Expense'),
                ),
                TextButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: const Text('Cancel'),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

关于课程代码正常运行的可能原因 #

课程中的代码可能未使用Spacer，或是模态弹窗的父容器设置了固定高度（比如用Container指定height），亦或是课程使用的Flutter版本对布局约束的处理存在差异，导致Spacer在他们的结构中能正常工作。

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