Flutter开发中如何识别屏幕cutout（刘海/挖孔屏）的位置？

原生内置API（无需第三方插件） #

Flutter 2.5及更高版本已经自带等效Android WindowInsets.getDisplayCutout() 的能力，直接通过MediaQuery即可读取刘海/挖孔的位置、尺寸参数：

final mediaQuery = MediaQuery.of(context);
final displayCutout = mediaQuery.displayCutout;

if (displayCutout != null) {
  // 顶部刘海侵入高度，可直接用来设置搜索栏的顶部边距
  double topCutoutHeight = displayCutout.topInset;
  // 左侧挖孔侵入宽度（横屏场景使用）
  double leftCutoutWidth = displayCutout.leftInset;
  // 右侧挖孔侵入宽度（横屏场景使用）
  double rightCutoutWidth = displayCutout.rightInset;
  // 所有挖孔区域的精确边界坐标，需要做精准适配时可读取
  List<Rect> cutoutRects = displayCutout.bounds;
}

快速适配方法 #

如果只是要让搜索栏避开刘海区域，不需要做复杂的自定义逻辑，直接用官方SafeArea组件包裹搜索栏即可，组件会自动根据当前设备的刘海/挖孔位置添加对应边距，无需手动计算：

Scaffold(
  body: Column(
    children: [
      SafeArea(
        child: SearchBar(), // 搜索栏会自动避开刘海区域
      ),
      Expanded(child: Container()) // 其余页面内容
    ],
  )
)

注意事项 #

• 你之前在<app_name>\android\app\src\main\AndroidManifest.xml中配置的windowLayoutInDisplayCutoutMode为shortEdges是正确的，只有开启该配置让应用内容延伸到刘海区域，Flutter才能读取到准确的刘海参数。
• 这套API同时兼容iOS的刘海适配，不需要单独做平台区分。

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