Flutter应用屏幕上下出现黑边问题的解决方法咨询

你之前的代码仅设置了状态栏透明，但未开启**边缘到边缘（edge-to-edge）**模式，系统默认会保留状态栏和导航栏的占位区域，因此黑块依然存在。以下是完整的解决步骤：

1. Flutter 代码层面配置全屏与透明栏 #

在main函数中先初始化绑定，再开启edge-to-edge模式并设置系统栏透明：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 开启edge-to-edge模式，让应用内容延伸至系统栏下方
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,
      overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]);
  
  // 设置状态栏和导航栏为透明
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    navigationBarColor: Colors.transparent,
    // 如果状态栏文字颜色需要适配背景，可添加下面两行
    // statusBarIconBrightness: Brightness.dark,
    // navigationBarIconBrightness: Brightness.dark,
  ));
  
  runApp(const MyApp());
}

2. Android 原生配置补充 #

打开android/app/src/main/res/values/styles.xml，修改AppTheme的属性，确保系统栏透明配置生效：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

3. 启动页（Splash Screen）排查 #

如果黑块出现在启动阶段，需要检查Android启动页的配置：

• 避免使用固定尺寸的图片作为启动背景，改用layer-list布局适配不同屏幕：

  <!-- android/app/src/main/res/drawable/launch_background.xml -->
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:drawable="@color/your_splash_color"/>
      <!-- 可添加居中的logo -->
      <item>
          <bitmap
              android:gravity="center"
              android:src="@mipmap/ic_launcher"/>
      </item>
  </layer-list>
  

4. iOS 端适配 #

打开ios/Runner/Info.plist，添加以下配置确保状态栏透明：

<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

内容的提问来源于stack exchange，提问作者Muzaffer Cokaslan