适用环境：本文适用于Flutter 3.0及以上版本，Android API 21+和iOS 11+系统。若你的环境与上述不同，执行前请先确认版本兼容性。

一、问题/场景描述

在开发Flutter移动应用时，启动后出现短暂的白屏现象是常见问题。用户在点击应用图标后，会看到一片空白屏幕，持续1到3秒后才显示Flutter界面。这种体验给用户留下应用“卡顿”或“加载缓慢”的印象，尤其在新安装或冷启动时更为明显。优化启动白屏对提升应用留存率和用户满意度至关重要。

二、原因分析

Flutter启动白屏的根本原因在于原生启动过程与Flutter引擎初始化之间的时间差。当用户启动应用时，操作系统首先加载原生组件（如Android的Activity或iOS的UIViewController），然后创建Flutter引擎，加载Dart代码，最后渲染第一帧。在这个过程中，原生启动到Flutter第一帧渲染之间，屏幕会显示默认的白色背景。具体因素包括：原生启动布局未配置背景色、Flutter引擎初始化耗时较长（尤其是首次启动）、资源加载如字体和图片同步阻塞、以及低端设备上的性能瓶颈。

三、详细解决步骤

步骤1：修改原生启动背景色

为Android应用设置启动背景色，避免白屏。编辑android/app/src/main/res/values/styles.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">@android:color/white</item>
    </style>
</resources>

然后创建或修改android/app/src/main/res/drawable/launch_background.xml文件，设置纯色背景。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
</layer-list>

对于iOS，编辑ios/Runner/Base.lproj/LaunchScreen.storyboard，在Interface Builder中将View的Background颜色设置为白色或其他颜色。

步骤2：使用Flutter原生闪屏插件

安装flutter_native_splash插件以配置闪屏。

flutter pub add flutter_native_splash

然后在pubspec.yaml中配置闪屏。

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash.png
  android: true
  ios: true

运行命令生成原生代码。

flutter pub run flutter_native_splash:create

这将自动生成Android和iOS的启动背景资源，替换默认白屏。

步骤3：优化Flutter引擎初始化

在main.dart中延迟引擎启动，避免主线程阻塞。

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 异步加载资源，避免阻塞
  Future.delayed(Duration.zero, () {
    runApp(MyApp());
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

此外，使用runApp前预加载字体和图片。

import 'package:flutter/services.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 预加载字体
  await FontLoader('MyFont')
      .addFont(Future.value(await rootBundle.load('fonts/myfont.ttf')))
      .load();
  runApp(MyApp());
}

步骤4：启用引擎预热

在Android中，通过FlutterEngineGroup预热引擎。修改MainActivity.kt或MainActivity.java。

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngineGroup

class MainActivity: FlutterActivity() {
    override fun provideFlutterEngine(context: Context): FlutterEngine? {
        val engineGroup = FlutterEngineGroup(context)
        return engineGroup.createAndRunEngine(context, DartExecutor.DartEntrypoint.createDefault())
    }
}

然后在AndroidManifest.xml中配置。

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <meta-data
        android:name="io.flutter.embedding.android.NormalTheme"
        android:resource="@style/NormalTheme"
        />
</activity>

四、注意事项

优化启动白屏时，需注意：背景色应与应用主题色一致，避免闪屏与主界面颜色冲突；闪屏图片不宜过大，否则增加加载时间；引擎预热会占用内存，低端设备需谨慎开启；Android 12及以上版本支持SplashScreen API，可优先使用原生方案。测试时覆盖冷启动（杀进程后启动）和热启动场景。

五、适用环境

本文适用于Flutter 3.0及以上版本，Android API 21+和iOS 11+系统，以及macOS/Linux 开发环境。

Flutter应用启动白屏优化完整指南