Flutter 启动页(闪屏页)具体实现和原理分析

启动页（launch screen）和闪屏页（splash screen）区别？

有很多人说闪屏和启动页是同一个概念，还有人说要避免使用闪屏，那么我们到底用不用闪屏呢？下面我就简单说一下闪屏和启动页的区别。

• IOS

根据iOS Human Interface Guidelines (2014-03-10) (iOS 7 Fin)%20(iOS%207%20Fin).pdf)文档中有这样的一句描述As much as possible, avoid displaying a splash screen or other startup experience，看来IOS是不太喜欢让设计用启动页。IOS的同学一定会有疑问，iOS Human Interface Guidelines 最新版Launch Screen又有这样一句话，Every app must supply a launch screen，卧槽这是啥？自相矛盾吗？下面我们尽可能的解决这个问题，闪屏和启动页根本就不是一个概念。

闪屏（splash screen）指的是违反了App的设计规范的第一屏，这个第一屏看起来与应用程序的设计完全不同！例如，可能包含静态文本，如版权声明或版本信息，还有就是应用已经启动还继续显示logo（我就见过这样的代码，写个定时器，2秒后跳转到主页），广告等内容，而不是显示用户可操作的UI。

启动页(launch screen)是指在符合设计规范的第一屏，这个第一屏看起来与应用程序的设计基本相同，并且短暂显示后跳转到用户可用的UI。

• Android

Android在MATERIAL DESIGN - Launch screen也有自己的设计规范，主要有两个方式，一个是显示品牌和UI占位符。

所以答案是：在开发中不要用闪屏，但是一定要有启动页。

特别感谢 高洋 同学的提问,让我从新思考了上面的问题。

Android启动流程

为什么要谈Android的启动流程呢？因为Flutter启动的时候，依赖的是Android的运行环境，其本质是Activity上添加了一个FlutterView，FlutterView继承SurfaceView，那么就容易理解了，Flutter的全部页面都是渲染到了FlutterView上，如果不熟悉Flutter的启动流程可以参考我写的Flutter启动流程 这篇文章，下面是对Flutter启动的一个简单描述。

在Flutter中，启动页的作用是在FlutterView显示第一帧之前，不要出现白屏，在FlutterView显示第一帧之前，我们分成两个阶段，Android启动阶段和Flutter启动阶段，Android启过程添加启动页非常容易，在主题xml中添加android:windowBackground属性，Flutter怎么添加启动页呢？其实框架已经帮助咱们实现好了，我下面就给大家说一下原理。

Flutter启动页具体实现和原理

1. 创建一个SplashActivity，这Activity继承FlutterActivity，重写onCreate()方法，在onCreate()方法中调用GeneratedPluginRegistrant.registerWith()，下面是启动页的代码。

public class SplashActivity extends FlutterActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
}
}

2. 在Manifest中添加SplashActivity作为App的启动Activity，设置SplashActivity的主题是LaunchTheme。下面是Manifest的配置文件。

3. meta-data的name = "io.flutter.app.android.SplashScreenUntilFirstFrame"的value一定要设置成true，一定要设置成true，一定要设置成true重要的事情说三遍，如果这个属性设置成false，效果是这样的。

从现象观察，启动页中间有一段时间黑屏，这个为什么呢？前面我们说过，Flutter的启动流程分成两部分，一部分是Android启动阶段，一个是Flutter的启动阶段，这个黑屏就是Flutter的启动阶段没有启动页所造成的。我们从源码入手，详细分析一下，下面是FlutterActivityDelegate的部分源码。

public final class FlutterActivityDelegate
implements FlutterActivityEvents,
FlutterView.Provider,
PluginRegistry {
private static final String SPLASH_SCREEN_META_DATA_KEY = “io.flutter.app.android.SplashScreenUntilFirstFrame”;

private View launchView;

@Override
public void onCreate(Bundle savedInstanceState) {
String[] args = getArgsFromIntent(activity.getIntent());
FlutterMain.ensureInitializationComplete(activity.getApplicationContext(), args);
flutterView = viewFactory.createFlutterView(activity);
if (flutterView == null) {
FlutterNativeView nativeView = viewFactory.createFlutterNativeView();
flutterView = new FlutterView(activity, null, nativeView);
flutterView.setLayoutParams(matchParent);
activity.setContentView(flutterView);
launchView = createLaunchView();//1
if (launchView != null) {
addLaunchView();//2
}
}
}

private View createLaunchView() {
if (!showSplashScreenUntilFirstFrame()) {//3
return null;
}
final Drawable launchScreenDrawable = getLaunchScreenDrawableFromActivityTheme();
final View view = new View(activity);
view.setBackground(launchScreenDrawable);
return view;
}

private Drawable getLaunchScreenDrawableFromActivityTheme() {
//省略了部分代码
try {
return activity.getResources().getDrawable(typedValue.resourceId);
} catch (NotFoundException e) {
return null;
}
}

private Boolean showSplashScreenUntilFirstFrame() {
try {
ActivityInfo activityInfo = activity.getPackageManager().getActivityInfo(
activity.getComponentName(),
PackageManager.GET_META_DATA|PackageManager.GET_ACTIVITIES);
Bundle metadata = activityInfo.metaData;
return metadata != null && metadata.getBoolean(SPLASH_SCREEN_META_DATA_KEY);
} catch (NameNotFoundException e) {
return false;
}
}

private void addLaunchView() {
activity.addContentView(launchView, matchParent);//4
flutterView.addFirstFrameListener(new FlutterView.FirstFrameListener() {//5
@Override
public void onFirstFrame() {
FlutterActivityDelegate.this.launchView.animate()
.alpha(0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
((ViewGroup) FlutterActivityDelegate.this.launchView.getParent())
.removeView(FlutterActivityDelegate.this.launchView);//5
}
});
}
});
activity.setTheme(android.R.style.Theme_Black_NoTitleBar);
}
}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
打开新的学习之门**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！