Flutter：点击TextField时出现底部RenderFlex溢出13像素问题

问题现象 #

点击TextField弹出键盘后出现布局溢出错误：

The following assertion was thrown during layout:
A RenderFlex overflowed by 13 pixels on the bottom.

页面嵌套在底部导航栏中，尝试用Expanded包裹Row未解决问题。

问题根源 #

1. 禁用了键盘布局适配：BottonBarNavigation中的Scaffold设置了resizeToAvoidBottomInset: false，阻止页面在键盘弹出时自动调整高度，导致底部内容被键盘挤压溢出。
2. ListView无法滚动：首页的ListView.builder使用NeverScrollableScrollPhysics()，即使外层有Expanded，内容超出剩余空间时也无法滚动，触发溢出。
3. 底部导航栏高度固定：用0.09.sh设置导航栏高度，在小屏设备上可能占用过多垂直空间，留给内容区域的高度不足。

修复方案 #

1. 恢复Scaffold的键盘自动适配 #

修改BottonBarNavigation中Scaffold的属性：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: _onWillPop,
    child: Scaffold(
      // 开启键盘适配，让页面自动调整高度
      resizeToAvoidBottomInset: true,
      backgroundColor: AppColors.whiteColor,
      body: SafeArea(child:pages.elementAt(_selectedIndex)),
      // 其余代码保持不变
    ),
  );
}

2. 让ListView支持滚动 #

修改HomeScreen中ListView的滚动物理属性：

Expanded(
  child: ListView.builder(
    itemCount: 50,
    shrinkWrap: true,
    // 改为可滚动物理效果，内容超出时允许滚动
    physics: const AlwaysScrollableScrollPhysics(),
    itemBuilder: ((context, index) {
      return const Text("data");
    })),
)

3. 优化底部导航栏高度适配（可选） #

如果小屏设备上导航栏仍然占用过多空间，可将固定高度改为弹性适配：

Widget _customBottomBar() {
  return BottomAppBar(
      color: Colors.transparent,
      elevation: 0,
      child: Padding(
        padding:  EdgeInsets.only(left: 15.sp, right: 15.sp,bottom: 10),
        child: Container(
            // 用max/min限制高度，兼顾不同设备
            height: max(50, min(0.09.sh, 70)),
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(
                    AssetPaths.navBarIcon,
                  ),
                  fit: BoxFit.fill),
            ),
            // 其余代码保持不变
        ),
      ));
}

验证效果 #

完成修改后，点击TextField弹出键盘时，页面会自动向上调整布局，ListView也能滚动容纳内容，底部溢出问题即可解决。

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