Flutter Web应用如何实现全屏 去除顶部留白与底部任务栏

常见失效方案原因说明 #

• SystemChrome.setEnabledSystemUIMode 是面向Flutter原生移动端的控制接口，Flutter Web运行在浏览器沙箱环境中，没有权限调用系统原生UI控制能力，该方法在Web端完全不生效。
• 页面初始化时直接调用document.documentElement.requestFullscreen() 违反浏览器安全策略：全屏API必须由用户主动交互事件（点击、触摸等）触发，自动调用会被浏览器直接拦截，还会触发部分实体设备的兼容性问题导致页面无法加载。
• 传入空items列表的BottomNavigationBar 会触发组件内部的参数校验异常，Flutter要求底部导航栏至少传入1个导航项，传空列表直接导致组件渲染报错灰屏。
• 单纯修改空白区域颜色只是遮盖问题，没有从根上移除浏览器默认预留的安全区边距，无法真正实现全屏。

分步实现方案 #

1. 修改Web入口全局配置 #

打开项目根目录下web/index.html文件，首先替换<head>标签内的viewport元标签，开启视口全覆盖：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

配置项中viewport-fit=cover是核心，作用是告知浏览器页面内容需要覆盖整个设备视口，不需要默认给系统状态栏、底部手势操作区预留留白。

之后在同个<head>标签内添加全局样式，清除浏览器默认的body、html边距：

<style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>

2. 修正Flutter端根布局适配 #

删除之前写的空AppBar、空底部导航栏这类占位取巧的代码，直接通过MediaQuery移除全局默认的安全区内边距，让内容撑满整个可用视口，示例代码如下：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    // 其他主题、路由配置保持不变
    home: MediaQuery(
      // 移除上下方向默认预留的安全区padding
      data: MediaQuery.of(context).removePadding(
        removeTop: true,
        removeBottom: true,
      ),
      child: Scaffold(
        // 关闭键盘弹出时的自动布局挤压，避免出现意外留白
        resizeToAvoidBottomInset: false,
        // 你的页面主体内容直接放在body里即可，不需要额外占位
        body: SizedBox.expand(
          child: Container(
            color: Theme.of(context).primaryColor,
            child: const Center(child: Text("全屏内容区")),
          ),
        ),
      ),
    ),
  );
}

3. 浏览器级全屏可选实现 #

如果需要实现隐藏浏览器地址栏、标签栏的系统级全屏效果，不要在页面初始化时自动调用全屏API，将触发逻辑绑定到用户主动点击事件上即可，示例：

// 需要先导入dart:html
// import 'dart:html' as html;
TextButton(
  onPressed: () {
    final rootElement = html.document.documentElement;
    // 先判断当前是否已经处于全屏状态，避免重复调用
    if (rootElement != null && html.document.fullscreenElement == null) {
      rootElement.requestFullscreen();
    }
  },
  child: const Text("点击进入全屏"),
)

修复前的留白问题效果参考：

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