Flutter 项目的闪屏页方案详解

前言

在APP项目中闪屏页（或启动页）的作用是为了解决在程序显示第一帧之前，不要出现白屏的现象，尤其是在纯RN和Flutter的项目里面，资源加载完成到显示的速度会比Native要逊色一些。这里主要总结纯Flutter项目可选择的闪屏页实现方案，大部分为 pub.dev 上比较受欢迎的几种。

效果展示

Native 处理

有native开发人员，建议使用。

flutter_native_splash

第三方库文件 flutter_native_splash 用于自动生成用于在Android和iOS中添加初始屏幕的本机代码。使用特定的平台，背景颜色和初始图像进行自定义。

使用方法

在pubspec.yaml文件中添加flutter_native_splash为dev依赖项。

dev_dependencies:
  flutter_native_splash: ^0.1.9
复制代码

flutter pub get
将以下设置添加到项目的pubspec.yaml文件

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false
复制代码

image:必须是一个png文件。
color:"#42a5f5" 和 "42a5f5"均可
android或ios:到false，是否为特定平台（ios/andorid）创建一个启动画面。
如果图像应使用所有可用的屏幕（宽度和高度），则可以使用fill属性。

flutter_native_splash:
  fill: true
复制代码

注意：fill iOS初始屏幕尚未实现该属性。

如果要在Android上禁用全屏启动屏幕，则可以使用android_disable_fullscreen属性。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true
复制代码

运行包添加设置后，使用

flutter pub pub run flutter_native_splash:create
复制代码

程序包运行完毕后，您的初始屏幕已准备就绪。

注意：

对于安卓：要想使用沉浸式状态栏需将以下代码注释，见下图
如果启动屏幕在iOS上未正确更新，或者在启动屏幕之前遇到白屏，请运行flutter clean并重新编译您的应用。
这个包修改launch_background.xml，styles.xml以及MainActivity文件在Android和LaunchScreen.storyboard，Info.plist和AppDelegateiOS上。

建议

如果要使用“材质图标”作为初始图像，请在（material.io/resources/icons）中以Android的PNG格式下载图标。我建议使用刚刚下载的文件夹中最大的图标，以获得更好的效果。drawable-xxxhdpi 材料颜色可在material.io/resources/color中找到

实现原理

Android 您的开机画面将调整为mdpi，hdpi，xhdpi，xxhdpi和xxxhdpi可绘。包含用于您的初始图像可绘制的标签将添加到launch_background.xml 背景色将添加到中colors.xml并在中引用launch_background.xml。 styles.xml和会添加用于全屏模式切换的代码MainActivity。

下图为运行成功后的安卓目录结构图

iOS 您的启动图像将被调整为@3x和@2x图像。颜色和图像属性将插入中LaunchScreen.storyboard。隐藏状态栏切换的代码将添加到Info.plist和中AppDelegate。

可以按照下图修改图片的位置大小：

flare_splash_screen

第三方库文件 flare_splash_screen 用于引导程序具有启动画面并带有Flare动画的功能，直到完成一些用于初始化应用程序的工作为止。

使用方法

安装 1.将库添加到包的pubspec.yaml文件中：

dependencies:
  flare_splash_screen: ^3.0.1
复制代码

$ flutter pub get
复制代码

3.导入

import 'package:flare_splash_screen/flare_splash_screen.dart';
复制代码

Navigation 启动屏幕将显示动画，并在完成后推送您指定的新路线，默认情况下会执行淡入淡出的动画，但是您可以使用进行自定义 transitionsBuilder

SplashScreen.navigate(
    name: 'intro.flr',
    next: (_) => MyHomePage(title: 'Flutter Demo Home Page'),
    until: () => Future.delayed(Duration(seconds: 5)),
    startAnimation: '1',
),
复制代码

Callback 初始屏幕将显示动画，并在onFinished完成时调用回调。

SplashScreen.callback(
    name: 'intro.flr',    
    onFinished: () {
      Navigator.of(context).pushReplacement(PageRouteBuilder(pageBuilder: (_,__,___) => MyHomePage(title: 'Flutter Demo Home Page')));
    },
    loopAnimation: '1',
    until: () => Future.delayed(Duration(seconds: 1)),
    endAnimation: '1',
),
复制代码

API

name ：闪屏页动画的路径/名称（需在pubspec.yaml中引入）

next ：闪屏页动画完成后进入的页面/组件

loopAnimation：要运行的动画名称，默认与第一个参数相同

startAnimation：动画在进入循环之前运行一次

endAnimation：动画称一次运行until完成

until：回调，返回将来处理您的初始化

isLoading：until如果要使用布尔值管理加载状态，则可以选择

height：闪屏页动画的高度，默认情况下会占据所有可用位置

width：强闪屏页动画的宽度，默认情况下会占据所有可用位置

alignment：闪屏页动画的对齐方式，默认居中

transitionsBuilder 显示时适用的过渡 next

可用的动画模式

只有一个动画

基本上，您需要显示一个动画，然后只需要停留在最后一帧即可。为此，只需指定startAnimation

开始和循环动画

您的动画具有简介和循环状态，为此只能指定startAnimation和loopAnimation

循环动画

您的动画具有完成和循环状态，为此只能指定endAnimation和loopAnimation

开始和结束的动画您的动画有一个简介和一个结束，该结束应停留在最后一帧，以便仅执行此操作startAnimation，endAnimation
开始，结束和循环动画您的动画具有简介，结束和循环状态，以便指定startAnimation，endAnimation和loopAnimation

小结

这种方案虽然很炫酷，但是并不能解决白屏的问题，从程序启动到动画加载之前还是会有白屏的现象。

总结

要想解决白屏还是离不开Native的支持，有Native开发者可以直接使用native开发，没有Native开发者可以选择flutter_native_splash方案，可以利用flare_splash_screen增加动画效果。

帮助中心

前言

效果展示

Native 处理

flutter_native_splash

使用方法

注意：

建议

实现原理

flare_splash_screen

使用方法

总结

相关文章