Flutter 项目的闪屏页方案
前言
在APP
项目中闪屏页(或启动页)的作用是为了解决在程序显示第一帧之前,不要出现白屏的现象,尤其是在纯RN
和Flutter
的项目里面,资源加载完成到显示的速度会比Native
要逊色一些。这里主要总结纯Flutter
项目可选择的闪屏页实现方案,大部分为 pub.dev 上比较受欢迎的几种。前言
https://pub.dev/
Native 处理
这里就不多说了,Native
处理闪屏页不管是Android
还是iOS
官方都有很成熟的解决方案。
flutter_splash_screen 插件
flutter_splash_screen 0.1.0
https://pub.dev/packages/flutter_splash_screen#-readme-tab-
这个名字叫的很大气,然而实际却不太硬。不知道为何受欢迎程度还挺高,难道是因为上架时间早?
目前来看这个插件没人维护,API
不完善,issue
没人解决。这里提到这个插件主要想让同样在选闪屏页方案小伙伴就别再趟坑了,绕路节省时间。
flutter_native_splash
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图片,包含1x2x3xcolor: "#ffffff" // 闪屏页背景色
还有一些针对平台的属性可供选用:
flutter_native_splash:android: false // 可以选择是否支持android或者iOSandroid_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
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.@overrideWidget 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.@overrideWidget 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框架排行榜,谁居榜首?
在看点这里好文分享给更多人↓↓
Flutter 项目的闪屏页方案相关推荐
- Flutter 项目在iPhone/苹果手机启动页/闪屏页黑屏问题
问题很奇怪 不清楚什么原因,有知道的朋友求告知,设置如图一所示的 storyboard 布局文件,就会显示1-2s的黑屏,去掉就可以了,那在 xcode 里面怎么设置开屏页呢,需要在 Info.lis ...
- Flutter——踩坑之旅(iOS闪屏页+启动页 闪屏之后会黑一下才进入启动页)
程序猿日常 flutter填坑--iOS闪屏页+启动页效果优化 闪屏之后会黑一下进入启动页 问题描述 大部分app都有自己的启动页,我们经常在启动页做一些判断逻辑,例如 是否第一次启动app,第一次启 ...
- Android Splash闪屏页秒开 Activity白屏、Activity黑屏问题
本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 今天在处理项目中闪屏界面的时候,遇到程序第一次开启会出现白屏大约2秒左右,然后再执行闪屏,故找到该篇文章 ...
- Android闪屏页适配
Android闪屏页适配 首先,为了避免第一次打开出现白屏,所以应该自定义style,添加anroid:windowBackground属性.此属性下放了一张1080*1920的闪屏图片,会出现在不同 ...
- MVP的使用 + 闪屏页广告
这是一个用mvp架构写的demo,实现了闪屏页的广告展示,版本更新弹窗.以及首页的Tab和带下拉刷新与上拉加载更多的列表页面,有需要的都可以进来仓库参考. 周一上线了一版,这些天在讨论下一波需求.正好 ...
- 【Android】android开发之splash闪屏页的四种实现方式,启动页的实现教程。
2019独角兽企业重金招聘Python工程师标准>>> 作者:程序员小冰,GitHub主页: https://github.com/QQ986945193 新浪微博:http://w ...
- 一种Android闪屏页实现方法(偏门别类)
不说废话上代码 第一步: 第二步: 这样就OK了..试试吧 效果自行演示咯 关于第一张图片中代码说明:这个也很重要 /** * Created by L on 16/10/19. * 闪屏页 * * ...
- android 闪屏页处理_Android应用闪屏页延迟跳转的三种写法
闪屏页也称之为欢迎页.在打开一个App时,我们第一眼看到的往往是一个闪屏页面,之所以叫闪屏页,是因为它出现之后会短暂地停留几秒钟再跳转到其他页面.闪屏页除了使用户体验更好外,还能给app留出初始化数据 ...
- 闪屏页新手引导页面主页判断跳转的逻辑
闪屏页的实现 : import android.app.Activity; import android.content.Intent; import android.os.Bundle; impor ...
最新文章
- 机器学习模型质量评价标准 — 精准率、召回率
- Altium Desgner软件,PCB设计中铺铜的作用
- NOIP模拟 蛋糕(DP+Dilworth定理)
- if(x1-x20) c语言,如何用if语句实现求方程a*x*x+b*x+c=0的根。
- 记账本------4
- datables自定义ajax,JQuery DataTables.net自定义列宽度在ajax加载后不起作用
- 关于sqoop增量导入oracle的数据到HDFS的出现的错误总结
- XX公司定制开发的仓库管理系统
- python django开发新闻聚合检索推荐_Django之聚合查询、分组查询、查询优化以及F、Q查询...
- 一图看懂什么是集成电路?
- 计算机二级机试题型,计算机二级机试题库
- 51CTO微职位一次通过PMP之经验浅谈
- 用excel产生多组随机抽签数
- Context-Aware Patch Generation for Better Automated Program Repair -上下文感知补丁生成更好的自动化程序修复
- 发现目录启用了自动目录列表功能apache如何设置。【解决方案】
- 【Day5.3】鸣沙山月牙泉看日落
- 双活数据中心建设概览
- 【STM32】HAL库 SPI DMA UART驱动开发
- 人脸识别行业应用状况及发展前景模式分析报告
- MYSQL学习教程总结