Flutter golden测试中如何模拟系统栏以测试SafeArea适配效果？

默认flutter test运行环境下MediaQuery的padding、viewPadding等系统区域参数值均为0，而SafeArea的避让逻辑完全依赖上述参数判断要预留的空间，这是测试时SafeArea逻辑不触发的核心原因。你可以通过以下两种方案强制模拟系统区域，完成适配场景的golden验证：

方法1：手动注入MediaQuery自定义参数 #

单测场景下优先使用该方案，直接在目标测试组件外层包裹自定义的MediaQuery，指定需要模拟的系统padding值即可：

testWidgets('SafeArea刘海屏适配golden测试', (tester) async {
  // 模拟iPhone带刘海+底部手势条的系统避让区域
  const simulatePadding = EdgeInsets.only(
    top: 47, // 状态栏+刘海高度
    bottom: 34, // 底部手势条高度
    left: 0,
    right: 0
  );

  await tester.pumpWidget(
    MaterialApp(
      home: MediaQuery(
        data: MediaQueryData(padding: simulatePadding),
        child: const YourTargetPage(), // 替换为你的测试页面
      ),
    )
  );

  // 执行golden截图对比
  await expectLater(
    find.byType(YourTargetPage),
    matchesGoldenFile('goldens/notch_adapt.png'),
  );
});

需要模拟不同设备场景时，只需修改padding参数的对应值即可：比如安卓挖孔屏可以调整top值为24，带三键导航栏的安卓设备可以调整bottom值为48。如果要测试键盘弹出的适配场景，修改MediaQueryData.viewInsets.bottom参数为对应键盘高度即可。

方法2：全局修改测试窗口配置 #

如果需要批量给多个测试用例统一设置系统参数，可以直接修改测试绑定的全局窗口配置，不需要每个用例单独套MediaQuery：

testWidgets('全局模拟系统区域golden测试', (tester) async {
  // 模拟iPhone14 Pro的硬件参数
  tester.binding.window.physicalSizeTestValue = const Size(1179, 2556);
  tester.binding.window.devicePixelRatioTestValue = 3;
  // 注意window的padding参数是物理像素单位，需要乘设备像素比
  tester.binding.window.paddingTestValue = const WindowPadding(
    top: 47 * 3,
    bottom: 34 * 3,
    left: 0,
    right: 0,
  );

  await tester.pumpWidget(const MaterialApp(home: YourTargetPage()));
  await expectLater(
    find.byType(YourTargetPage),
    matchesGoldenFile('goldens/global_notch_adapt.png'),
  );

  // 测试结束后重置配置，避免影响其他用例
  addTearDown(() {
    tester.binding.window.clearPhysicalSizeTestValue();
    tester.binding.window.clearDevicePixelRatioTestValue();
    tester.binding.window.clearPaddingTestValue();
  });
});

该方案更贴近真实设备的参数传递逻辑，适合全设备适配场景的批量测试。

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