Flutter全屏模式顶部出现黑条问题求助（Android 13）

针对Android13系统下Flutter应用设置全屏后顶部仍出现黑条的问题，可通过以下步骤解决：

1. 完善SystemChrome配置 #

修改main函数，补充系统UI的透明化设置及布局延伸配置：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置沉浸式粘性模式，隐藏所有系统UI覆盖层
  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.immersiveSticky,
    overlays: [],
  );
  
  // 将状态栏、导航栏设为透明，适配图标亮度（根据App主题调整）
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    navigationBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.light,
    navigationBarIconBrightness: Brightness.light,
  ));
  
  // 强制隐藏所有系统UI覆盖层
  SystemChrome.setEnabledSystemUIOverlays([]);
  
  runApp(const MyApp());
}

2. 调整Android主题配置 #

修改android/app/src/main/res/values/styles.xml，为启动主题和普通主题添加全屏、透明状态栏/导航栏属性：

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

3. 确认AndroidManifest配置 #

在android/app/src/main/AndroidManifest.xml中，确保Activity使用上述配置的主题：

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:theme="@style/NormalTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">

4. 布局适配（可选） #

若使用Scaffold，可通过extendBodyBehindAppBar属性让内容延伸到系统UI区域：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      extendBodyBehindAppBar: true,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        // 测试背景色，确认全屏效果
        color: Colors.white,
        child: // 你的业务内容
      ),
    ),
  );
}

问题原因 #

Android13对系统UI的控制逻辑有所调整，仅设置SystemUiMode.immersiveSticky无法自动将状态栏背景设为透明，导致窗口背景的黑条透出。通过上述配置，可明确将系统UI设为透明并让应用布局延伸至这些区域，彻底消除黑条。

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