前言
在APP
项目中闪屏页(或启动页)的作用是为了解决在程序显示第一帧之前,不要出现白屏的现象,尤其是在纯RN
和Flutter
的项目里面,资源加载完成到显示的速度会比Native
要逊色一些。这里主要总结纯Flutter
项目可选择的闪屏页实现方案,大部分为 pub.dev 上比较受欢迎的几种。前言
https://pub.dev/
这里就不多说了,Native
处理闪屏页不管是Android
还是iOS
官方都有很成熟的解决方案。
flutter_splash_screen 0.1.0
https://pub.dev/packages/flutter_splash_screen#-readme-tab-
这个名字叫的很大气,然而实际却不太硬。不知道为何受欢迎程度还挺高,难道是因为上架时间早?
目前来看这个插件没人维护,API
不完善,issue
没人解决。这里提到这个插件主要想让同样在选闪屏页方案小伙伴就别再趟坑了,绕路节省时间。
flutter_native_splash 0.1.9
https://pub.dev/packages/flutter_native_splash#-readme-tab-
这个package
可以自动生Android
和iOS
端闪屏页的代码。并且可以自定义image
和背景color
。
集成比较简单:
添加依赖
dev_dependencies:
flutter_native_splash: ^0.1.9
别忘记执行
flutter pub get
将设置添加到项目的pubspec.yaml
中
flutter_native_splash:
image: images/splash.png // 对应生成iOS中LaunchImage图片,包含1x2x3x
color: "#ffffff" // 闪屏页背景色
还有一些针对平台的属性可供选用:
flutter_native_splash:
android: false // 可以选择是否支持android或者iOS
android_disable_fullscreen: true // 禁用android全屏启动
fill: true // 如果图像可用在所有的屏幕上添加为true,目前只支持android
生成上面添加的资源到Native
flutter pub pub run flutter_native_splash:create
可以看到对应生成的资源文件
bogon:flutterdemo yin$ flutter pub pub run flutter_native_splash:create
[Android] Creating splash images
[Android] Updating launch_background.xml with splash image path
[Android] Updating colors.xml with color for splash screen background
[Android] Updating styles.xml with full screen mode setting
[iOS] Creating splash images
[iOS] Updating LaunchScreen.storyboard with width, height and color
bogon:flutterdemo yin$
iOS
端在Xcode
工程中选中LaunchScreen.storyboard
,关联UIImageView
和刚刚生成的图片,如果有需要调整UIImageView
的布局。
到这里使用 flutter_native_splash 0.1.9 方式制作闪屏页就完成了,实际上从技术层面讲这种方案还是Native
的闪屏页方案,只不过做成了工具提高了效率。最终run
起来也确实是我们想要的效果。
https://pub.dev/packages/flutter_native_splash#-readme-tab-
郑重说明:图标icon
来自 iconfont 不做任何商业用途~~
https://www.iconfont.cn/
flare_splash_screen 3.0.1 这个package
让闪屏页具有Flare
动画的功能。
https://pub.dev/packages/flare_splash_screen
添加依赖并执行flutter pub get
dependencies:
flare_splash_screen: ^3.0.1
pubspec.yaml
中添加制作好的.flr
,我这里使用demo
自带的,公司项目中使用肯定是找设计师要。
assets:
- intro.flr
conding
import 'package:flare_splash_screen/flare_splash_screen.dart';
SplashScreen.navigate
方式
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SplashScreen.navigate(
name: 'intro.flr',
next: (context) => BottomNavigationWidget(),
until: () => Future.delayed(Duration(seconds: 5)),
startAnimation: '1',
),
);
}
}
SplashScreen.callback
方式
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Builder(
builder: (context) => SplashScreen.callback(
name: 'intro.flr',
onSuccess: (_) {
Navigator.of(context).pushReplacement(PageRouteBuilder(
pageBuilder: (_, __, ___) =>
BottomNavigationWidget()));
},
loopAnimation: '1',
until: () => Future.delayed(Duration(seconds: 1)),
endAnimation: '1',
onError: (error, stacktrace) {
print(error);
},
),
),
);
}
}
这个package
的API
写的很灵活也很详细,选择你需要的属性做对应的调试即可,这里不做过多解释,直接看文档就好。
这种方案虽然很炫酷,但是并不能完美解决白屏的问题,从程序启动到动画加载之前还是会有白屏的现象。
我理解这种方案需要跟Native
的闪屏页方案结合使用才是爆炸效果,至于如何做到闪屏页和这个Flare
动画完美过渡就要交给设计师们发光发热了。这里就展示一个粗糙的效果:
目前来看优雅的闪屏页还是离不开Native
的支持
团队有Native
开发者闪屏页推荐选择方案为Native
处理。
团队没有Native
开发者可以选择flutter_native_splash
方案。
追求炫酷的可以尝试flare_splash_screen
。
近期精彩内容推荐:
Python是一门神奇的语言!
IntelliJ IDEA 的 2020 ,真的很牛皮!
删库跑路真的发生,技术总监干的!
2020年Java框架排行榜,谁居榜首?
在看点这里好文分享给更多人↓↓