Flutter应用启动先显示白屏再加载闪屏的原因排查

我的Flutter应用启动时存在明显延迟：用户打开应用后会先看到2-3秒的纯白屏，之后才会显示自定义的闪屏界面。目前没有使用任何第三方闪屏库，需要优化加载流程来提升用户体验。

问题根源分析 #

• 初始化阻塞UI线程：main函数里的await Firebase.initializeApp()和await GetStorage.init()是同步阻塞操作，会推迟runApp()的执行，导致白屏时间变长。
• 自定义闪屏启动太晚：Flutter框架要等所有初始化完成后才会渲染SplashScreen，这期间用户只能看到系统默认的白屏。

具体优化方案 #

1. 后台隔离执行初始化任务 #

把Firebase和GetStorage的初始化放到后台Isolate中，避免阻塞UI线程，让runApp()更快执行：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 后台线程处理初始化，不卡UI
  await Isolate.run(() async {
    await Firebase.initializeApp();
    await GetStorage.init('contactBox');
  });
  
  runApp(const ProviderScope(child: MyApp()));
}

2. 配置原生启动屏（最推荐） #

用Android/iOS原生的启动屏配置，在Flutter框架启动前就显示和自定义闪屏一致的界面，彻底消除白屏：

• Android：修改android/app/src/main/res/drawable/launch_background.xml，替换成你的渐变背景和logo，和SplashScreen视觉统一。
• iOS：更新ios/Runner/Assets.xcassets/LaunchImage.imageset里的图片，调整Launch Screen.storyboard的布局。

3. 简化闪屏导航逻辑 #

原代码中用authStateChanges().listen()会有额外的流监听延迟，直接获取当前用户状态即可：

void _navigateToNextScreen() {
  final user = FirebaseAuth.instance.currentUser;
  if (user != null) {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => const Home()),
    );
  } else {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const Login()),
    );
  }
}

4. 预加载闪屏资源 #

提前加载闪屏用到的图片，避免渲染时才加载导致的延迟：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 预加载闪屏logo
  await precacheImage(const AssetImage('assets/Images/logo.png'), null);
  
  await Firebase.initializeApp();
  await GetStorage.init('contactBox');
  
  runApp(const ProviderScope(child: MyApp()));
}

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