Flutter应用中Android SplashScreen退出动画引发状态栏颜色异常与布局重叠问题

看起来你在给Flutter App加Android新SplashScreen的退出动画时踩了两个小坑——状态栏莫名变粉、系统导航栏和应用底部栏重叠。我之前折腾原生启动页的时候也碰到过类似情况，给你分享几个亲测有效的解决办法：

一、解决状态栏变粉色的问题 #

这个大概率是Android SplashScreen的主题样式残留导致的，毕竟新的SplashScreen API会用它自身的主题渲染启动页，退出后没自动切换回你的Flutter应用主题。你可以从这两个方向入手：

1. 调整Android端的SplashScreen主题配置 #

打开Android项目下的android/app/src/main/res/values/styles.xml（深色模式对应values-night/styles.xml），找到SplashScreen对应的主题（一般是Theme.SplashScreen），确保它继承自你的应用主题，或者明确指定状态栏颜色：

<style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
    <!-- 启动页背景配置 -->
    <item name="windowSplashScreenBackground">@color/your_splash_background</item>
    <!-- 关键：设置和应用一致的状态栏颜色 -->
    <item name="android:statusBarColor">@color/your_app_status_bar_color</item>
    <!-- 指定启动后切换到的应用主主题 -->
    <item name="postSplashScreenTheme">@style/Theme.App</item>
</style>

重点是postSplashScreenTheme必须指向你的应用主主题，这样启动页退出后会自动切换主题，不会残留启动页的颜色设置。

2. 在Flutter启动后主动设置状态栏颜色 #

如果上面的配置没生效，也可以在Flutter入口页面的initState里用SystemChrome主动设置状态栏颜色：

import 'package:flutter/services.dart';

@override
void initState() {
  super.initState();
  // 替换成你需要的状态栏颜色和图标亮度
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.white,
    statusBarIconBrightness: Brightness.dark,
  ));
}

二、解决系统导航栏与应用底部栏重叠的问题 #

这个问题通常是SplashScreen的窗口布局参数没正确传递给Flutter应用，导致Flutter没考虑到系统导航栏的高度。可以这么处理：

1. 调整Android应用主主题的布局属性 #

打开styles.xml里的应用主主题，添加以下属性，让应用自动适应系统栏：

<style name="Theme.App" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- 其他主题配置 -->
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:fitsSystemWindows">true</item>
</style>

fitsSystemWindows会让应用布局自动避开状态栏和导航栏，避免重叠。

2. 在Flutter中用SafeArea包裹底部栏 #

如果Android端配置还不够，在Flutter代码里把底部栏用SafeArea包裹，自动加上导航栏高度的padding：

SafeArea(
  bottom: true, // 仅处理底部安全区域
  child: YourBottomNavigationBar(),
)

备注：内容来源于stack exchange，提问作者P_L1