深圳市移动端网站建设,网站建设公司官方网站,北京服务设计,十堰电商网站建设文章目录 1. 概念介绍2. 实现方法3. 示例代码4. 内容总结 我们在上一章回中介绍了使用intl插件时遇到的问题相关的内容#xff0c;本章回中将介绍实现splash页面的另外一种方法.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍
我们在本章回中介绍的… 文章目录 1. 概念介绍2. 实现方法3. 示例代码4. 内容总结 我们在上一章回中介绍了使用intl插件时遇到的问题相关的内容本章回中将介绍实现splash页面的另外一种方法.闲话休提让我们一起Talk Flutter吧。 1. 概念介绍
我们在本章回中介绍的splash页面就是程序启动时显示的页面我们在一百四十一回介绍过它的实现方法不过我们介绍的是官方提供的方法我们将在本章回中介绍 另外一种实现方法:通过flutter_native_splash插件实现splash页面。
2. 实现方法
我们首先在yaml配置文件中添加包并且通过pub get命令把包获取到项目中来不过添加时对版本要求比较麻烦经常会和其它包有冲突下面是一个错误示例
Because every version of flutter_test from sdk depends on path 1.8.3 and flutter_native_splash 2.3.12 depends on path ^1.9.0, flutter_test from sdk is incompatible with flutter_native_splash 2.3.12.
So, because fluttercookbook depends on both flutter_native_splash ^2.4.0 and flutter_test from sdk, version solving failed.我的解决方法是尝试降低包的版本多尝试几个版本就可以。添加完包后就可以使用了下面是详细的使用方法请大家参考
创建一个新的yaml文件文件名必须是flutter_native_splash.yaml;在文件中配置相关信息,这些信息主要用来控制splash页面的颜色和图片等内容;在main文件中添加代码主要用来初始化包并且启动splash页面在主页面中停止splash页面然后会自动显示程序的主页面 上面的示步骤中也可以不创建yaml配置文件而是直接在pubspec.yaml文件中配置不过要顶格不能向加入插件一样有空格。需要注意的是一定要移除splash页面 如果不移除splash就不会进入主页面导致程序一起卡着不动。 此外上面的步骤完成后可以在Android平台的程序上运行在IOS平台上运行时需要把base.lproj拖入已经打开的xCode项目中然后经弹窗中选择复制这样就会 复制一份启动项目的stroyboard到项目中。这个在官方文档中有详细介绍,我就不再介绍了。不过这个方法有待改进因为程序编译都无法通过。
3. 示例代码
下面是程序的示例代码与上一小节中的实现步骤完全匹配请大家参考
///yaml文件中的配置信息可以参考官方文档color: #42a5f5#图片格式必须是pngimage: images/avata.png/// 在main文件中添加代码主要用来初始化包并且启动splash页面WidgetsBinding widgetsBinding WidgetsFlutterBinding.ensureInitialized();FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);runApp(const MyApp());
/// 在MaterialApp的home属性对应的页面中移除splash页面void initState() {super.initState();///可以在这里添加一些延时在主程序页面中移除splash不然无法显示页面FlutterNativeSplash.remove();}上面的代码运行时并没有实际的效果也就是没有出现我期望的splash页面不过程序启动时有延时也就是说该功能起作用了但是没有显示splash页面。总之我在 Android和iOS两个平台上都没有成功实现splash页面。我觉得可能是哪个地方没有设置好但是和官方给的操作说明完全一致还有一种可能就是flutter版本的的 问题因为我在安装该插件时就发现了版本不兼容的问题。此外从技术上来看该插件修改了iOS工程下的storyboar文件只是修改有错误但是Android目录下控 制splash页面的xml文件没有任何的修改。所以我觉得这是splash页面没有生效的根本原因。
4. 内容总结
我们在本章回中介绍了如何通过flutter_native_splash插件实现splash页面。主要介绍了实现的步骤并且给出了示例代码不过比较遗憾在是没有真正在程序中 实现splash页面。没有实现的原因可能与我当前的flutter版本有关大家也可以在评论区发表自己的意见。鉴于无法使用这个插件的原因我们还是推荐使用官方提供 的方法来实现splash页面具体的内容我们在开篇时介绍过大家可以参考。 看官们与实现splash页面的另外一种方法相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
