Flutter中隐藏状态栏后出现黑条，求解决方法

我想要隐藏Flutter应用的状态栏，虽然状态栏已成功隐藏，但原位置出现了黑条，该如何解决此问题？

当前使用代码：

void main()async {
  runApp(MyApp());
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
}

已尝试过的SystemUiMode参数：

SystemUiMode.immersive
SystemUiMode.immersiveSticky
SystemUiMode.edgeToEdge
SystemUiMode.leanBack
SystemUiMode.manual , overlays: []

解决方法 #

1. 调整系统UI配置的执行顺序 #

把系统UI设置放在runApp之前，同时确保Flutter绑定初始化完成，否则配置可能无法及时生效：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive, overlays: []);
  runApp(MyApp());
}

2. 配置透明状态栏+强制全屏 #

让页面内容可以延伸到原状态栏区域，避免留空出现黑条：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 隐藏状态栏和导航栏
  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive, overlays: []);
  // 设置状态栏、导航栏为透明
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
  ));
  // 开启edgeToEdge模式，让内容填充全屏
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(MyApp());
}

3. 移除页面根布局的默认padding #

确保页面内容真正填充到全屏区域，移除系统默认的状态栏padding：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: Scaffold(
        body: Container(
          color: Colors.white,
          child: const Center(child: Text("全屏内容测试")),
        ),
      ),
    );
  }
}

4. Android平台额外配置（可选） #

修改android/app/src/main/res/values/styles.xml中的主题，设置为全屏主题：

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar.Fullscreen">
    <!-- 保留原有配置 -->
</style>
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar.Fullscreen">
    <!-- 保留原有配置 -->
</style>

内容的提问来源于stack exchange，提问作者ِِYazdan Naderi