前言

---

近来闲暇时间一直在做Flutter,闪屏页是一个比较常见的需求,网上的闪屏页教程大部分是那种类似于广告页,而非iOS中的 LaunchScreen 性质的闪屏页.按照原来的方案我们要配置闪屏页的话,我们需要同时配置两端的闪屏页,那么有没有比较简单的方案来配置闪屏页呢? 毋庸置疑,当然是有了,那就是Flutter的插件 - flutter_native_splash . 接下来我们就来看一下具体应该怎么使用这个插件.

使用

---

首先把 flutter_native_splash 导入到工程的pubspec.yaml中.这里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies.具体如下所示.

dependencies:
  ....

dev_dependencies:
  flutter_native_splash: ^0.3.0 # 生成闪屏页

接下来我们就来配置flutter_native_splash,在配置之前我们看一下 flutter_native_splash 的可配置项.

配置项	说明
color	用来设置闪屏页的背景颜色
image	设置闪屏页的默认态logo或背景图片路径
color_dark	设置黑夜模式下的闪屏页背景颜色
image_dark	设置闪屏页的黑夜模式logo或背景图片路径
android	是否生成android的闪屏页 值为true/false
ios	是否生成iOS的闪屏页 值为true/false
web	是否生成web网页的闪屏页 值为true/false
android_gravity	image/image_dark在android闪屏页中的位置,值有 bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top
ios_content_mode	image/image_dark在iOS闪屏页中的位置,值有 scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight
web_image_mode	image/image_dark在web页屏幕中的位置,值有 center, contain, stretch, cover
fullscreen	image/image_dark是否是全屏模式 值为true/false

例如,我现在只有一个logo图片,那么我想生成iOS和android两端的闪屏页,这时候我只需在pubspec.yaml 如下设置即可.

flutter_native_splash:
  color: "#FFFFFF"
  image: "resource/image/common/common_app_splash_icon_400.png"
  ardroid: true
  ios: true

当然了,如果你有其他配置可以自行进行添加.

配置完成了,我们该如何生成呢?这时候需要我们打开终端 cd 到我们的工程目录下.如果是Android Studio 或者 VSCode 默认就是在当前工程目录下.

cd '工程目录文件'

然后我们需要执行下面的三个命令来生成闪屏页

flutter clean

flutter pub get

flutter pub run flutter_native_splash:create

每一次都敲三个命令实属麻烦,我们把上诉的三个命令整合成一个命令,如下所示.

flutter clean && flutter pub get && flutter pub run flutter_native_splash:create

那么,我们不想使用该插件生成的闪屏页该怎么办呢?我们只需要执行下面命令即可.

flutter pub run flutter_native_splash:remove

注:每一次更换图片都是需要重新执行命令重新生成.

结语

---

OK,上面就是关于 flutter_native_splash 的使用全部内容,其实比较简单,如果需要定制化的,建议还是各自平台配置各自的闪屏页.如果有任何问题欢迎在评论区批评指导,感谢大家了.