Flutter全屏应用问题：状态栏隐藏仍占用空间

你的代码已隐藏状态栏，但该区域仍显示黑色且未被红色容器填充，核心原因是系统仍保留了状态栏的占位空间，且应用内容未延伸至该区域。以下是修复方案：

修改代码 #

1. 调整系统UI模式与样式 #

更新main函数中的系统设置，让内容延伸至状态栏区域：

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 设置沉浸式全屏，内容覆盖状态栏/导航栏区域，隐藏UI元素
  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.immersiveSticky,
    overlays: [],
  );
  // 将状态栏和导航栏设置为透明
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
  ));
  runApp(const MyApp());
}

2. 移除系统默认顶部内边距 #

在MyApp的home中，用MediaQuery.removePadding移除顶部的系统内边距，让容器填充整个屏幕：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        useMaterial3: true
      ),
      home: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.red,
        ),
      ),
    );
  }
}

关键说明 #

• SystemUiMode.immersiveSticky：让应用内容完全覆盖状态栏和导航栏区域，隐藏系统UI元素；用户点击屏幕时UI会暂时显示，随后自动隐藏，适合全屏场景。
• MediaQuery.removePadding(removeTop: true)：移除系统为状态栏预留的顶部内边距，确保容器能填充到屏幕最顶端。

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