Flutter 如何让所有页面（含启动过渡屏）状态栏导航栏全透明且显示深色图标

Flutter Android应用启动时的两个过渡屏分别对应：

• 第一屏：系统冷启动窗口预览，完全由style.xml中的AppTheme配置控制
• 第二屏：Flutter引擎初始化过渡窗口，由MainActivity中onCreate阶段的窗口配置控制

当前修改后第二屏图标仍为白色的核心原因是：仅在MainActivity中修改了系统栏的背景颜色为透明，没有同步修改系统栏图标亮度属性，导致浅色图标在白色/透明背景下不可见。

1. 修改style.xml配置 #

替换原有NormalTheme配置，统一第一屏的透明系统栏+黑色图标效果：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <!-- 系统栏完全透明 -->
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <!-- 状态栏图标黑色（Android 6.0+支持） -->
        <item name="android:windowLightStatusBar">true</item>
        <!-- 导航栏图标黑色（Android 8.0+支持） -->
        <item name="android:windowLightNavigationBar">true</item>
        <!-- 适配挖孔屏避免系统栏区域出现黑边 -->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

2. 修改MainActivity.kt配置 #

设置系统栏透明的同时同步配置图标亮度，保证第二屏效果和目标样式一致：

import android.os.Build
import android.view.Window
import android.graphics.Color
import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val window: Window = window
        // 系统栏完全透明
        window.setStatusBarColor(Color.TRANSPARENT)
        window.setNavigationBarColor(Color.TRANSPARENT)
        // 同步设置状态栏图标为黑色
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or 
                android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
        }
        // 同步设置导航栏图标为黑色
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or
                android.view.View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
        }
        // 允许应用内容延伸到系统栏区域
        window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or
            android.view.View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
            android.view.View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
            android.view.View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    }
}

3. 统一Flutter端全局系统栏样式 #

在应用入口处全局配置，保证后续所有Flutter页面效果一致：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUIOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light, // iOS端状态栏图标黑色适配
    statusBarIconBrightness: Brightness.dark, // Android端状态栏图标黑色适配
    navigationBarColor: Colors.transparent,
    navigationBarIconBrightness: Brightness.dark, // 导航栏图标黑色适配
  ));
  runApp(const MyApp());
}

内容的提问来源于stack exchange，提问作者Mahmoud Niypoo