Flutter应用如何添加Splash Screen？新手找不到准确实现方案

很多教程只讲一半逻辑，新手照着做要么出冷启动白屏，要么出现页面跳变的bug，以下是从配置到上线的全步骤： #

第一步：配置原生层启动页，解决冷启动白屏问题 #

这是整个方案最核心、也是最容易被忽略的步骤：APP冷启动的前1-2秒，Flutter引擎还没加载完成，这时候的展示内容完全由原生系统控制，必须单独配置。

Android端配置 #

• 打开项目路径下的 android/app/src/main/res/drawable/launch_background.xml，替换默认的纯白色背景配置，加入品牌logo、背景色等你需要的启动页内容，参考配置：

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <!-- 全局背景色 -->
      <item android:drawable="@color/white" />
      <!-- 居中显示应用图标 -->
      <item>
          <bitmap
              android:gravity="center"
              android:src="@mipmap/ic_launcher" />
      </item>
  </layer-list>
  

• 打开 android/app/src/main/res/values/styles.xml，确认启动Activity关联的主题指向刚才配置的launch_background，去掉默认的窗口浮层设置，避免启动时出现突兀的状态栏背景。
• 注意如果项目的targetSdkVersion高于30，需要在AndroidManifest.xml的启动Activity节点补充android:exported="true"属性，否则会出现编译报错。

iOS端配置 #

• 打开iOS模块下的 Runner/Assets.xcassets，新建LaunchImage图片集，按照不同屏幕尺寸把对应的启动页图导入。
• 打开 Runner/Info.plist，确认启动页配置关联的是刚才设置的图片集，取消Storyboard默认的白色占位块，保证启动图能全屏展示。

这一步配置完成后，用户点开APP的第一时间就会看到你设置的启动内容，不会再出现空白等待的问题。

第二步：Flutter层实现Splash跳转逻辑 #

原生基础配置完成后，就可以在Flutter层做定制化展示和跳转逻辑：

• 新建SplashPage组件，布局要和原生层配置的启动页完全对齐（同样的背景色、同样位置的logo），保证从系统启动页切到Flutter页面时没有画面跳变。
• 在SplashPage的initState生命周期里，执行APP启动必须的初始化操作（比如初始化第三方SDK、读取本地缓存、拉取远程配置），所有操作完成后跳转到应用主页面，参考实现代码：

  class SplashPage extends StatefulWidget {
    const SplashPage({super.key});
  
    @override
    State<SplashPage> createState() => _SplashPageState();
  }
  
  class _SplashPageState extends State<SplashPage> {
    @override
    void initState() {
      super.initState();
      _initAppTask().then((_) {
        // 用pushReplacement跳转，避免返回键回到splash页
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) => const HomePage()),
        );
      });
    }
  
    Future<void> _initAppTask() async {
      // 在这里放启动阶段必须做的初始化逻辑，比如初始化SharedPreferences、推送服务等
      await Future.delayed(const Duration(seconds: 2));
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Image.asset('assets/images/app_logo.png'),
        ),
      );
    }
  }
  

• 把应用初始路由指向SplashPage，替换掉默认直接指向HomePage的配置。

新手常见踩坑提醒 #

• 不要过度依赖第三方splash插件：很多插件只会在Flutter层做页面跳转，完全不处理原生层的冷启动白屏，装完反而会增加包体积。
• 跳转路由必须用pushReplacement：如果用普通的push方法，用户进入主页面按系统返回键，会直接退回到Splash页，甚至出现反复初始化的死循环。
• 启动页的展示时长不要太长：一般2-3秒足够用户看到品牌logo，超过3秒很容易让用户觉得应用卡顿，直接强制退出。

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