Flutter Splash Screen加载原图时出现白色背景如何解决

问题根因 #

闪屏阶段出现白色背景是两个环节的配置缺失共同导致的：

• 原生启动阶段白屏：Flutter 应用启动时首先会加载原生端默认启动页，在 Flutter 引擎完成初始化、渲染出第一帧页面之前，这部分页面不受 Flutter 代码控制，未配置自定义启动图时默认显示纯白色背景。
• Flutter 页面配置问题：现有代码中手动给Scaffold设置了白色背景，在背景图资源加载完成前会先透出白底；同时给背景图添加了暗色混合滤镜，会破坏原始画质；另外路由跳转未做组件挂载校验，容易触发路由异常导致白屏。

具体修复步骤 #

1. 配置原生端启动页，解决引擎初始化阶段白屏 #

原生启动页的配置无法通过 Flutter 组件代码修改，直接使用自动化配置方案即可，避免手动修改多端原生文件出现适配问题：

• 在pubspec.yaml中添加开发依赖：

dev_dependencies:
  flutter_native_splash: ^2.3.10

• 在pubspec.yaml根节点添加启动图配置，路径与项目内的启动图资源保持一致：

flutter_native_splash:
  image: assets/images/background_image.png
  color: "#000000" # 图片加载前的占位色，可替换为启动图主色调避免突兀
  fit: cover
  fullscreen: true
  android_gravity: fill
  ios_content_mode: scaleAspectFill

• 执行配置生成命令，自动完成安卓、iOS双端的原生启动图注入：

flutter pub get
dart run flutter_native_splash:create

配置完成后，引擎初始化阶段会直接显示你设置的启动图，不会再出现原生层的白色启动块。

2. 修改Flutter层闪屏页代码 #

调整现有代码的几个问题点：移除Scaffold的白色背景、去掉影响画质的颜色滤镜、修正路由跳转逻辑、提升背景图渲染优先级，修改后的完整代码如下：

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 3), () {
      // 校验组件挂载状态，避免异步执行时context失效
      if (!mounted) return;
      // 使用pushReplacement替换路由，避免返回键回到闪屏页
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const LoginScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 背景设为透明，避免图片加载前透出白底
      backgroundColor: Colors.transparent,
      body: Stack(
        fit: StackFit.expand,
        children: [
          // 直接用全屏Image组件加载背景，渲染优先级高于Container装饰，减少闪白概率
          Image.asset(
            'assets/images/background_image.png',
            fit: BoxFit.cover,
          ),
          // 居中Logo组件
          Center(
            child: Container(
              padding: const EdgeInsetsDirectional.all(50),
              decoration: const BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle,
                boxShadow: AppColors.boxShadow,
              ),
              child: const Text('Logo'),
            ),
          ),
        ],
      ),
    );
  }
}

3. 资源与构建校验 #

• 确认pubspec.yaml中flutter -> assets节点已正确声明图片资源路径，否则图片会加载失败：

flutter:
  assets:
    - assets/images/background_image.png

• 清理构建缓存后全量重新编译，启动图相关改动不支持热重载：

flutter clean
flutter pub get
flutter run

• 如果仍显示旧的白屏缓存，先卸载真机/模拟器上的旧应用，再重新安装即可，系统层会缓存旧的启动图资源。

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