flutter_native_splash插件的简单使用

一、flutter_native_splash的作用

点击图标打开一个应用，默认情况本地应用会展示白色启动页填充这段时间间隔，这对用户体验尤为不友好。为了填补这段时间空白，我们可以自己配置启动页。但对于flutter的开发者来说，同时配置andorid、ios以及web端的启动页有些麻烦不好维护，flutter_native_splash的诞生解决了这一痛点，通过配置文件的方式配置启动页，命令行运行命令后会自动生成android、ios、web端对应的启动页，并且支持暗色模式、全屏以及特殊平台的配置。

二、安装

flutter pub add flutter_native_splash

三、配置以及生成启动页

官网给了两种配置方式：

1. 直接在 pubspec.yaml中配置
2. 创建一个以.yaml结尾的自定义文件

笔者使用的是第一种，配置项如下

flutter_native_splash:
  # 启动页的背景颜色
  color: "#ffffff"
  # 启动页图标
  image: assets/splash.png
  # 手机操作系统大于等于12时需特殊设置
  android_12:
    image: assets/splash.png
    icon_background_color: '#ffffff'

注意：
可能会出现在android端真机调试，看不到启动页的效果的情况，笔者遇到过的一种原因是真机操作系统使用的是Android 13，配置中如果android_12的配置那么将不会有启动页的效果，加上android_12相关配置即可。

自动生成启动页的命令

在项目根目录下执行以下命令

dart run flutter_native_splash:create

如上图，执行成功！！！

四、启动项目

重启项目即可看到配置的启动页。