Flutter的MaterialApp应用如何移除Android系统导航三键并规避MediaQuery报错

问题核心说明 #

• 之前检索到的教程实现逻辑仅覆盖Flutter应用内部AppBar组件的返回按钮隐藏，和Android系统层面的返回、主页、多任务三键导航隐藏完全属于不同层级的操作，无法直接复用。
• 调整逻辑时触发的MediaQuery.of() called with a context that does not contain a MediaQuery报错，根源是操作过程中破坏了MaterialApp内部自动注入MediaQuery的组件树结构，并非系统UI隐藏操作本身会引发依赖缺失。

具体实现步骤 #

完全不需要修改MaterialApp的内部组件结构，仅在应用初始化阶段配置系统UI显示规则，即可在保留所有MediaQuery依赖能力的前提下，实现三键导航的隐藏效果。

新版Flutter 实现代码 #

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 保留原有横屏锁定逻辑
  OrientationSingleton.left = true;
  await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
  // 核心配置：开启粘滞沉浸模式，隐藏系统导航栏与顶部状态栏
  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.immersiveSticky,
    overlays: [],
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 保持MaterialApp原始结构，无需自定义MediaQuery包裹层级
    return MaterialApp(
      // 原有业务路由、主题、首页组件配置正常书写即可
    );
  }
}

低版本Flutter 兼容写法 #

如果项目使用的Flutter版本不支持新版系统UI配置接口，可以使用旧版API实现等效效果：

// 传入空数组代表隐藏所有系统UI覆盖层，包含底部三键导航
SystemChrome.setEnabledSystemUIOverlays([]);

注意：原有代码中传入[SystemUiOverlay.bottom]的配置仅会保留底部系统覆盖层，无法实现导航栏隐藏的效果，需要调整为空数组参数。

方案适配性说明 #

• 全程未修改MaterialApp的内部组件树结构，MediaQuery上下文会由MaterialApp按照系统提供的设备信息自动完整注入，所有依赖MediaQuery.of()获取屏幕尺寸、安全边距的业务逻辑都可以正常运行，不会触发上下文缺失的报错。
• 采用粘滞沉浸模式时，用户从屏幕边缘向内滑动可以临时唤出系统导航栏，短暂停留后会自动收回，不会打断用户的连续操作。
• 该配置仅作用于系统UI层面，不会对Flutter内部的路由返回逻辑、AppBar组件的展示逻辑产生任何干扰。

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