Flutter获取不含导航栏等的屏幕尺寸及77px空白问题解析

那77px的空白，本质是系统状态栏+底部安全区域的高度总和，不同设备这个值确实会变——比如刘海屏、全面屏手机的安全区高度都不一样，硬写77px肯定适配翻车。

为啥会出现这个空白？ #

你现在用Get.height - kToolbarHeight - kBottomNavigationBarHeight - 77的写法，问题出在这几点：

1. Get.height拿的是屏幕物理总高度，但页面内容默认会被系统安全区（状态栏、底部的系统预留空间）挤开，没处理的话就会留出空白。
2. 你页面里根本没加AppBar和BottomNavigationBar，减kToolbarHeight和kBottomNavigationBarHeight完全没必要，属于多余计算。
3. 硬减固定的77px是适配大忌，不同设备的安全区高度差异很大，换个设备这个数值就不对了。

正确的处理方式 #

别硬编码数值，用动态方法获取安全区高度：

方法1：用Getx直接获取安全区 #

Getx提供了便捷的安全区获取方式，直接计算可用高度：

final safePadding = Get.mediaQuery.padding;
final availableHeight = Get.height - safePadding.top - safePadding.bottom;

方法2：用Flutter内置MediaQuery #

和上面效果一致，适合不用Getx的场景（你用Getx可以忽略这个，但知道也没坏处）：

final safePadding = MediaQuery.of(context).padding;
final availableHeight = Get.height - safePadding.top - safePadding.bottom;

方法3：用SafeArea组件自动处理 #

如果只是想让内容铺满屏幕，不用手动算高度，直接用SafeArea包裹内容，它会自动适配安全区：

Scaffold(
  body: SafeArea(
    // 设为false可以让内容延伸到状态栏/底部安全区外，按需调整
    top: false,
    bottom: false,
    child: YourContentWidget(),
  ),
);

总结 #

• 去掉多余的kToolbarHeight和kBottomNavigationBarHeight计算，因为你页面没这两个组件。
• 永远不要用固定数值适配安全区，必须动态获取设备的安全区高度。

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