（两百四十六）Flutter - 学习向 Android 应用中添加闪屏页
学习
https://flutter.cn/docs/development/ui/advanced/splash-screen
向 Android 应用中添加闪屏页
开启 Flutter 的体验需要短暂地等待 Dart 的初始化。一个完整的 Flutter 应用还额外需要 Android 应用程序标准的初始化时间。 Flutter 支持在 Android 应用初始化的时候展示启动页，并且还支持在你的 Flutter 初始化时展示闪屏页。本指南展示如何在 Flutter 编写的 Android 应用中使用启动页和闪屏页。
iOS 启动页所有应用在交付到 Apple 应用商店之前 必须使用 Xcode storyboard 以提供应用启动页面。
默认的 Flutter 模板包括一个名为 LaunchScreen.storyboard 的 Xcode storyboard，可以根据您的选择进行定制你自己的资源。默认情况下，storyboard 将显示空白图像，但你可以修改它。请通过点击项目根目录下的 open ios/Runner.xcworkspace 打开 Flutter 应用程序的 Xcode 项目。然后从项目导航器中选择 Runner/Assets.xcassets，并将所需图像拖拽至 LaunchImage 图像集中。
Apple 在人机接口指南部分中为发布启动页提供了详细的指南。
Android 启动页In Android, there are two separate screens that you can control: a launch screen shown while your Android app initializes, and a splash screen that displays while the Flutter experience initializes.
备忘
使用一些策略来最小化 Flutter 初始化相关过程中的等待时间。考虑 [预热 FlutterEngine][pre-warming a FlutterEngine] 以及 [在整个应用中复用 FlutterEngine][re-using a FlutterEngine throughout your app] ，以避免大多数的等待时间。
应用初始化当操作系统执行应用进程时，所有 Android app 都需要一定的初始化时间。因此 Android 提供了 launch screen 的概念，它在应用初始化的时候显示 Drawable。
默认的 Flutter 项目模板定义了启动主题和启动背景。你可以在 styles.xml 中自定义一个主题，将一个 Drawable 配置给该主题的 windowBackground，它将作为启动页被展示。
@drawable/launch_background
这里原先的background里的图片被注释掉了，需要改一下
定义一个普通主题
此外，在 styles.xml 中定义一个普通主题，当启动页消失后，将其应用在 FlutterActivity 上。普通主题的背景仅仅展示非常短暂的时间，比如当启动页消失后、方向改变或者 Activity 恢复期间。因此对于普通主题的背景颜色，建议使用与 Flutter UI 主要背景颜色相似的纯色。
@drawable/normal_background
在 AndroidManifest.xml 中配置 FlutterActivity
在 AndroidManifest.xml 中，将 FlutterActivity 的 theme 设置为启动主题，将元数据元素添加到所需的 FlutterActivity，以指示 Flutter 在适当的时机从启动主题切换到普通主题。
现在，Android 应用程序在初始化时会展示对应的启动屏。
这个普通主题我试了没生效。。。。启动页倒是可以生效的，但是中间有黑屏
效果见https://www.bilibili.com/video/bv1Rg4y1q752
Flutter闪屏页
应用程序中的每种 Flutter 体验都需要一些时间以初始化运行代码的 Dart isolate。这意味着用户将暂时地看到空白屏幕，直到 Flutter 渲染其第一帧为止。为了提升用户体验，Flutter 提供了在其初始化时展示一个 Android View 作为闪屏页的方式。
针对 Flutter 的闪屏页，这里提供了两个可选项。第一个可选项是展示一个你选择的 Drawable，并在其初始化完成后淡出。另外一个可选项是提供一个自定义的闪屏页，它能够展示出任意你想要的 Android View 内容。
展示Drawable闪屏页
Drawable 闪屏页可被配置在 FlutterActivity、FlutterFragment 或者 FlutterView 中。
在FlutterActivity中配置
在 FlutterActivity 中将一个 Drawable 作为 Flutter 闪屏页进行展示，请将以下元数据添加到 AndroidManifest.xml 中所关联的 FlutterActivity 中。
为了将闪屏页展示出与启动页相同的效果，在 io.flutter.embedding.android.SplashScreenDrawable 和 meta-data 中引用相同的 @drawable/launch_background。
在FlutterFragment中配置
在 FlutterFragment 中将一个 Drawable 作为 Flutter 闪屏页进行展示，创建一个 FlutterFragment 的子类并重写其 provideSplashScreen() 方法。
public class MyFlutterFragment extends FlutterFragment {
@Override
protected SplashScreen provideSplashScreen() {
// Load the splash Drawable.
Drawable splash = getResources().getDrawable(R.drawable.my_splash);
// Construct a DrawableSplashScreen with the loaded splash
// Drawable and return it.
return new DrawableSplashScreen(splash);
}
}
创建一个自定义的闪屏页
闪屏页是一个非常好推广品牌的时机。因此，很多应用实现了独特且高度定制化的闪屏体验。为方便起见，Flutter 允许你将任意的 Android View 作为显示屏进行展示，甚至可以控制 Flutter 第一帧渲染完毕之后如何将 View 过渡到 Flutter。
实现一个自定义闪屏View
首先，定义一个将被作为闪屏页展示的自定义 View。该 View 可以展示任意内容，从简单的纯色到一个动画。
实现SplashScreen接口
为已声明的自定义 View 实现 SplashScreen 接口。
本指南展示了两种实现 SplashScreen 的方式。首先，下面是一个 SplashScreen 的示例，它既没有视觉状态，也没有过渡动画。
public class SimpleSplashScreen implements SplashScreen {
@Override
@Nullable
public View createSplashView(
@NonNull Context context,
@Nullable Bundle savedInstanceState
) {
// Return a new MySplashView without saving a reference, because it
// has no state that needs to be tracked or controlled.
return new MySplashView(context);
}
@Override
public void transitionToFlutter(@NonNull Runnable onTransitionComplete) {
// Immediately invoke onTransitionComplete because this SplashScreen
// doesn't display a transition animation.
//
// Every SplashScreen *MUST* invoke onTransitionComplete at some point
// for the splash system to work correctly.
onTransitionComplete.run();
}
}
第二个示例更为复杂。在此示例中，自定义 SplashScreen 保留了对其自定义 View 的引用，并指示自定义 View 的过渡效果，将 onTransitionComplete 回调传递给自定义 View 进行调用。
public class SplashScreenWithTransition implements SplashScreen {
private MySplashView mySplashView;
@Override
@Nullable
public View createSplashView(
@NonNull Context context,
@Nullable Bundle savedInstanceState
) {
// A reference to the MySplashView is retained so that it can be told
// to transition away at the appropriate time.
mySplashView = new MySplashView(context);
return mySplashView;
}
@Override
public void transitionToFlutter(@NonNull Runnable onTransitionComplete) {
// Instruct MySplashView to animate away in whatever manner it wants.
// The onTransitionComplete Runnable is passed to the MySplashView
// to be invoked when the transition animation is complete.
mySplashView.animateAway(onTransitionComplete);
}
}
对于自定义的闪屏页而言，天空才是极限。实际上，你可以创建一个展示天空动画的闪屏页！享受这个灵活的启动系统所带来的乐趣，并在社区中分享你的创作！
总结
本地试了下，如果只有启动页没有闪屏页，则启动页和正式页面中还是存在黑屏，启动页+闪屏页的组合才会没有黑屏
最终无黑屏的效果：https://www.bilibili.com/video/bv1VZ4y1s7YU
i加加
原创文章 238获赞 76访问量 20万+
关注
私信
展开阅读全文
作者：i加加
