如何防止widget出现在通知栏/摄像头挖孔区域下方被遮挡？

你之前手动添加SizedBox的方案适配性差，不同设备的状态栏、挖孔区域高度差异很大，推荐以下几种官方适配方案：

方案1：使用SafeArea组件（最通用、优先推荐） #

这是Flutter官方专门为解决系统区域遮挡问题提供的标准组件，会自动读取当前设备的安全边距配置，给子组件添加对应的内边距，自动避开顶部状态栏、摄像头挖孔、底部手势条等所有系统占用区域。

• 基础用法：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 直接把SafeArea包裹在页面内容的外层即可
    body: SafeArea(
      child: Column(
        // 你的原有页面内容
        children: [
          Text("不会被遮挡的文本"),
        ],
      ),
    ),
  );
}

• 自定义配置：
  • 不需要避开底部手势条时可添加参数bottom: false
  • 不需要避开顶部区域时可添加参数top: false
  • 支持通过minimum参数自定义额外追加的留白边距

方案2：手动获取安全边距自定义适配（适合特殊定制场景） #

如果你需要更精细的控制边距逻辑，可以通过MediaQuery主动读取当前设备的安全边距数值自行处理：

@override
Widget build(BuildContext context) {
  // 获取顶部安全边距（即状态栏+摄像头挖孔的总高度）
  final topSafePadding = MediaQuery.of(context).padding.top;
  return Container(
    padding: EdgeInsets.only(top: topSafePadding),
    child: // 你的原有页面内容
  );
}

注意：不要硬编码固定高度值，不同品牌、不同尺寸设备的顶部安全高度差异很大，硬写数值会导致多设备适配错误。

方案3：全局隐藏状态栏（适合全屏类应用） #

如果你的应用本身是全屏使用场景，可以直接隐藏系统状态栏，从根源避免遮挡问题：

import 'package:flutter/services.dart';

@override
void initState() {
  super.initState();
  // 隐藏顶部状态栏，进入全屏模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: []);
}

@override
void dispose() {
  // 页面销毁时恢复系统状态栏显示，避免影响其他应用
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: SystemUiOverlay.values);
  super.dispose();
}

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