Flutter开启沉浸模式隐藏状态栏后仍残留对应padding如何解决？

你遇到的顶部留白是Flutter默认保留系统UI占位padding导致的：即便通过SystemChrome隐藏了系统状态栏，Flutter的MediaQuery仍然会默认保留状态栏高度的padding值，引导组件避开该区域渲染。

1. 前置沉浸配置 #

首先在应用启动时正确配置沉浸模式，确保系统状态栏完全隐藏：

import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 可选immersiveSticky模式，用户滑动呼出状态栏/导航栏后会自动隐藏，更适合全沉浸场景
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  runApp(const MyApp());
}

2. 无Scaffold场景适配 #

使用MediaQuery.removePadding包裹根组件，手动移除顶部系统预留padding：

@override
Widget build(BuildContext context) {
  return MediaQuery.removePadding(
    context: context,
    removeTop: true,
    // 如需同时移除底部虚拟导航栏的预留padding，可新增removeBottom: true
    child: Container(color: Colors.red),
  );
}

3. 使用Scaffold场景适配 #

只需配置Scaffold的两个属性即可实现全铺满：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 取消Scaffold默认的顶部系统UI占位
    primary: false,
    // 允许Body内容延伸到状态栏区域渲染
    extendBodyBehindAppBar: true,
    // 如需同时铺满底部虚拟导航栏区域，新增extendBody: true即可
    body: Container(color: Colors.red),
  );
}

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