Flutter BottomNavigationBar中Container占满全屏致body消失

放在bottomNavigationBar位置的Container占满全屏、导致Scaffold主体body内容无法显示的核心原因如下：

• Column组件的垂直主轴默认尺寸规则为MainAxisSize.max，默认行为是尽可能撑满父组件提供的全部垂直可用空间
• Scaffold的bottomNavigationBar插槽本身不会对传入组件做强制高度限制，当没有显式高度约束的Container包裹默认配置的Column时，Column会直接拉伸占满整个Scaffold的垂直可用空间，最终把body区域完全挤压覆盖。

问题复现的运行效果：

只需要给Column组件显式设置mainAxisSize: MainAxisSize.min，让Column的高度跟随内部子组件的实际高度自适应，不再无限拉伸占满空间即可解决问题。
修复后的完整代码如下：

bottomNavigationBar: Container(
      padding: EdgeInsets.only(
          left: Dimensions.sizeWidthPercent(16),
          right: Dimensions.sizeWidthPercent(16),
          bottom: Dimensions.sizeHeightPercent(30)),
      child: Column(
        // 新增该行配置即可修复问题
        mainAxisSize: MainAxisSize.min,
        children: const [
          TextContainer(text: 'Proceed to request dispatcher')
        ],
      ),
    )

可选优化 #

如果需要适配全面屏的系统底部安全区，避免底部栏内容被系统手势条、虚拟按键遮挡，可以在Container外层包裹SafeArea组件，无需手动计算适配不同机型的底部安全距离。

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