Flutter出现RenderFlex溢出错误，如何实现底部按钮固定的滚动布局

核心思路是通过Expanded组件在Column中占据除固定底部按钮外的所有剩余高度，再在Expanded内部嵌套滚动组件实现表单区域滚动、底部按钮固定的效果。

具体修改步骤 #

1. 保留外层Column结构，将原来的表单区域整体用Expanded包裹
2. 在Expanded内部嵌套SingleChildScrollView，承载所有可滚动的表单内容
3. 底部按钮保持在Column的最末尾，无需额外对齐配置即可固定在页面底部

修改后代码示例 #

Scaffold(
  // 键盘弹出时自动调整页面，避免输入框被遮挡，默认即为true可按需调整
  resizeToAvoidBottomInset: true,
  body: Column(
    children: <Widget>[
      // 用Expanded包裹可滚动区域，占满底部按钮外的所有剩余空间
      Expanded(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 40.0, 15.0, 0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: const <Widget>[
                        Icon(Icons.menu),
                        Image(),       //Asset image
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        const Icon(Icons.notifications_none),
                        const SizedBox(width: 27.0),
                        CircleAvatar(
                          child: Text("JM"),
                        ),
                      ],
                    )
                  ],
                ),
                Row(
                  children: const <Widget>[
                    Icon(Icons.arrow_back),
                    SizedBox(width: 20.0),
                    Text("Public page"),
                  ],
                ),
                const SizedBox(
                  height: 20.0,
                ),
                const Text("  Please fill the form following the proper order."),
                const SizedBox(height: 10.0),
                OverviewWidget(), //Widget with lots of TextFormField
                SizedBox(height: 10.0),
                DescriptionWidget(), //Widget with lots of TextFormField
                // 可加底部留白，避免滚动到底部时内容紧贴按钮
                SizedBox(height: 20,),
              ],
            ),
          ),
        ),
      ),
      // 底部固定按钮，放在Column末尾自然固定在底部
      GestureDetector(
        onTap: () {
          print("Hello");
        },
        child: Container(
          height: 130.0,
          width: double.infinity,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Colors.grey.shade400,
                blurRadius: 10,
                spreadRadius: 1,
              )
            ],
          ),
          child: Container(
            margin: const EdgeInsets.only(top: 10.0, bottom: 30.0),
            decoration: BoxDecoration(
              color: Colors.green.shade400,
              borderRadius: BorderRadius.circular(35),
            ),
            child: const Padding(
              padding: EdgeInsets.symmetric(
                vertical: 15.0,
                horizontal: 150.0,
              ),
              child: Text(
                "Save",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 17,
                    fontWeight: FontWeight.w600),
              ),
            ),
          ),
        ),
      ),
    ],
  ),
);

注意事项 #

• OverviewWidget和DescriptionWidget内部不要嵌套滚动组件，避免和外层的SingleChildScrollView产生滚动冲突
• 如果底部按钮在键盘弹出时被顶起不符合需求，可将Scaffold的resizeToAvoidBottomInset设为false

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