Flutter全屏模式问题：隐藏状态栏和虚拟按键后屏幕仍有空白

嘿，这个问题我之前也踩过坑！你遇到的空白主要有两个核心原因：一是你用的setEnabledSystemUIOverlays已经是Flutter标记为过时的API了，二是Scaffold组件默认会给内容添加padding来避开系统UI区域——就算你隐藏了系统UI，这个默认的padding还是会残留。下面给你一步步搞定的方案：

1. 替换过时的全屏控制API #

现在Flutter官方推荐用SystemChrome.setEnabledSystemUIMode来替代旧的setEnabledSystemUIOverlays，这个新API能更精准地控制系统UI的显示逻辑。我们可以选择两种全屏模式：

• SystemUiMode.immersive：隐藏状态栏和导航栏，点击屏幕会临时唤起它们
• SystemUiMode.immersiveSticky：隐藏后只有从屏幕边缘滑动才会唤起，松开后自动重新隐藏

这两种模式都会让应用内容直接填充整个屏幕，不会留下系统UI的占位空白。

2. 调整Scaffold的默认行为 #

Scaffold自带的适配逻辑是导致空白的另一个关键，我们需要做两个调整：

• 如果不需要顶部的AppBar，直接移除appBar参数，避免它占据顶部空间
• 设置resizeToAvoidBottomInset: false，关闭自动适配底部虚拟按键区域的padding逻辑
• 让body里的内容明确占满整个屏幕

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  // 使用新API设置沉浸式全屏模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "Test",
      home: MyHomePage(title: "Test"),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 移除默认AppBar，避免顶部占位
      // appBar: AppBar(title: Text(title)),
      resizeToAvoidBottomInset: false,
      body: Container(
        color: Colors.red,
        width: double.infinity,
        height: double.infinity,
      ),
    );
  }
}

额外需求：保留AppBar同时全屏 #

如果你还想保留AppBar，又要实现全屏效果，可以给Scaffold添加extendBodyBehindAppBar: true，并把AppBar设置为透明无阴影，让它重叠在屏幕顶部：

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    title: Text(title),
    backgroundColor: Colors.transparent,
    elevation: 0,
  ),
  resizeToAvoidBottomInset: false,
  body: Container(color: Colors.red),
)

这样修改后，你的红色Container就会完全填充整个屏幕，顶部和底部的空白就消失啦！

内容的提问来源于stack exchange，提问作者钄℃椈琚�,fullscreen;flutter"