Flutter-快速创建简单闪屏页

布满荆棘的人生 2022-10-30 11:25 394阅读 0赞

![aecfaff235b5049666ee621d528e4941.png][]

#### 前言 ####

--------------------

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

#### 使用 ####

--------------------

首先把 [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** 的可配置项.

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

例如,我现在只有一个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** 的使用全部内容,其实比较简单,如果需要定制化的,建议还是各自平台配置各自的闪屏页.如果有任何问题欢迎在评论区批评指导,感谢大家了.

![5fa75a89d61e1b09b61d27fe33e4b993.gif][]

[aecfaff235b5049666ee621d528e4941.png]: /images/20221024/8f418c0259a248389480c92c3f08304a.png
[flutter_native_splash]: https://pub.flutter-io.cn/packages/flutter_native_splash
[5fa75a89d61e1b09b61d27fe33e4b993.gif]: /images/20221024/d278ce55d5bc47118448e23c2396fe64.png