一、flutter_native_splash的作用
点击图标打开一个应用,默认情况本地应用会展示白色启动页填充这段时间间隔,这对用户体验尤为不友好。为了填补这段时间空白,我们可以自己配置启动页。但对于flutter的开发者来说,同时配置andorid、ios以及web端的启动页有些麻烦不好维护,flutter_native_splash的诞生解决了这一痛点,通过配置文件的方式配置启动页,命令行运行命令后会自动生成android、ios、web端对应的启动页,并且支持暗色模式、全屏以及特殊平台的配置。
二、安装
flutter pub add flutter_native_splash
三、配置以及生成启动页
官网给了两种配置方式:
- 直接在
pubspec.yaml
中配置 - 创建一个以
.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
如上图,执行成功!!!
四、启动项目
重启项目即可看到配置的启动页。