第四百四十一回 再谈flutter_native_splash包

2024-04-10 06:12
文章标签 第四 flutter native 四十 再谈 splash 一回

本文主要是介绍第四百四十一回 再谈flutter_native_splash包，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 1. 知识回顾
  • 2. 使用方法
  • 3. 示例代码
  • 4. 经验与总结
    • 4.1 经验分享
    • 4.2 内容总结

我们在上一章回中介绍了"overlay_tooltip简介"相关的内容，本章回中将 再谈flutter_native_splash包.闲话休提，让我们一起Talk Flutter吧。

1. 知识回顾

我们在第四百一十一回介绍了flutter_native_splash包的概念和用法，该包主要用来实现App的程序启动页面。不过我们当时运行后并没有实现启动页面，经过仔细分析后我可以使用这个包实现splash页面，本章回中将继续介绍它的用法，同时分享相关的使用技巧和经验。

2. 使用方法

首先创建一个新的yaml文件，文件名必须是flutter_native_splash.yaml;

  • 在文件中配置相关信息,这些信息主要用来控制splash页面的颜色和图片等内容;
  • 运行命令：flutter_native_splash:create，生成splash页面需要的图片和相关资源文件；
  • 在main文件中添加代码，主要用来初始化包，并且启动splash页面；
  • 在主页面中停止splash页面，然后会自动显示程序的主页面；

关于上面的步骤还有一些细节需要说明：

  • 上面的步骤中也可以不创建yaml配置文件，而是直接在pubspec.yaml文件中配置，不过要顶格，不能向加入插件一样有空格。我们推荐单独建立一个文件去配置splash;
  • 在代码中需要注意的是一定要移除splash页面，如果不移除splash，就不会进入主页面，导致程序一起卡着不动。
  • 运行命令生成图片和资源文件时必须在系统的终端中运行命令，IDE中无法识别dart命令。会报无法识别dart命令的错误；
  • 运行命令时先切换到项目根目录下，不需要在create后面加path/flutter_native_splash.yaml(官方文档中介绍命令时需要添加路径)命令可以自动识别该文件，前提是flutter_native_splash.yaml文件位于项目根目录下。否则会报错误：Could not find file flutter_native_splash:create
  • 如果不想使用该插件了，可以把命令中的create替换成remove：flutter_native_splash:remove来删除该插件生成的关于splash的文件；
  • 运行命令后会在Android的drawble目录下生成background.png文件，同时在其它drawble-xxxdpi目录下生成splash.png和android12splash.png文件。
  • 运行命令时也修改了launch_background.xml文件，修改内容就是修改背景图片和splash图片的名字。我感觉把背景从颜色修改成图片不太好.为此还修改了styl.xml中的内容。IOS平台下会修改info.plst和Runner/Asset目录下的LaunchImage图片。web等其它平台也会生成相应的文件,不过可以配置成false.这样就不生成了。

此外，上面的步骤完成后可以在Android平台的程序上运行，在IOS平台上运行时需要把base.lproj拖入已经打开的xCode项目中，然后在弹窗中选择复制，这样就会复制一份启动项目的stroyboard到项目中。这个在官方文档中有详细介绍,我就不再介绍了。

我总结为:先在yaml文件中的配置splash相关信息，然后通过命令生成不同分辨率下的splash图片，接着修改配置文件(launch_background.xml)中的内容应用于splash功能。最后是在代码中导入该功能,同时控制splash的启动时长。

下面是运行命令时的结果，请大家参考，该结果与配置有关，配置不同生成产物不同：

your_pach% dart run flutter_native_splash:create
Building package executable... 
Built flutter_native_splash:create.
[Android] Creating default splash images
[Android] Creating default android12splash images
[Android] Creating dark mode android12splash images
[Android] Updating launch background(s) with splash image path...
[Android]  - android/app/src/main/res/drawable/launch_background.xml
[Android]  - android/app/src/main/res/drawable-v21/launch_background.xml
[Android] Updating styles...
[Android]  - android/app/src/main/res/values-v31/styles.xml
[Android] No android/app/src/main/res/values-v31/styles.xml found in your Android project
[Android] Creating android/app/src/main/res/values-v31/styles.xml and adding it to your Android project
[Android]  - android/app/src/main/res/values-night-v31/styles.xml
[Android] No android/app/src/main/res/values-night-v31/styles.xml found in your Android project
[Android] Creating android/app/src/main/res/values-night-v31/styles.xml and adding it to your Android project
[Android]  - android/app/src/main/res/values/styles.xml
[Android]  - android/app/src/main/res/values-night/styles.xml
[iOS] Creating  images
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
[Web] Creating images
[Web] Creating images
[Web] Creating background images
[Web] Creating CSS
[Web] Updating index.html
╔════════════════════════════════════════════════════════════════════════════╗
║                       NEED A GREAT FLUTTER DEVELOPER?                      ║
╠════════════════════════════════════════════════════════════════════════════╣
║                                                                            ║
║   I am available!  Find me at https://www.linkedin.com/in/hansonjon/       ║
║                                                                            ║
╚════════════════════════════════════════════════════════════════════════════╝✅ Native splash complete.
Now go finish building something awesome! 💪 You rock! 🤘🤩
Like the package? Please give it a 👍 here: https://pub.dev/packages/flutter_native_splash

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页面。我在这里就不演示程序的运行结果了，建议大家自己去实践。

4. 经验与总结

4.1 经验分享

这个插件看着简单，不过在使用时还有些细节，比如我上次就没有运行成功，反复分析后才运行成功，接下来我们分享一些使用过程总结的经验，详细如下：

  • 配置文件中内容需要专门对Android12适配，不然高于此版本的系统不会产生splash效果；
  • 官方关于配置文件的内容写的比较详细，有些参数无法理解的话可以参考github的介绍，它配有图形，或者看Android官方文档中关于splash的介绍也可以；
  • 使用命令生成图片时需要在电脑的终端运行命令，而且可以通过命令的运行结果查看生成的图片和xml等配置文件；
  • 如果手机上没有效果，试试单独启动app，而不是通过IDE直接运行app。我上次没有运行成功就是这个原因；

4.2 内容总结

使用这个插件实现splash页面可以总结为三个步骤：填写配置信息 -> 生成图片等资源 -> 代码中使用splash资源。

如果不使用插件的话，我们需要分平台修改配置信息，Andrid是在xml文件中，iOS是在Runner中。同时还需要UI设计师提供不同分辨率下的图片。这个插件与自己实现splash功能时的差别在于不需要分不同平台去配置splash信息，而且只需要一张图片就可以。通过包中的命令可以生成多个平台上的splash文件，对于每个平台可以自动适配不同的分辨率，比如android会在
drawable-xxxdpi等5个目录下生成对应的splash文件。IOS会生成1x,2x和3x格式的图片。整体来说该包实现了跨平台的功能，效率高一些。

看官们，与"再谈flutter_native_splash包"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！

这篇关于第四百四十一回 再谈flutter_native_splash包的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/890257。

相关文章

鸿蒙开发搭建flutter适配的开发环境

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE
阅读更多...
native和static native区别

native和static native区别

本文基于Hello JNI  如有疑惑，请看之前几篇文章。 native 与 static native java中 public native String helloJni();public native static String helloJniStatic();1212 JNI中 JNIEXPORT jstring JNICALL Java_com_test_g
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
项目实战系列三: 家居购项目 第四部分

项目实战系列三: 家居购项目 第四部分

购物车 🌳购物车🍆显示购物车🍆更改商品数量🍆清空购物车&&删除商品 🌳生成订单 🌳购物车 需求分析 1.会员登陆后, 可以添加家居到购物车 2.完成购物车的设计和实现 3.每添加一个家居,购物车的数量+1, 并显示 程序框架图 1.新建src/com/zzw/furns/entity/CartItem.java, CartItem-家居项模型 /***
阅读更多...
flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题 GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。 最近通过flutter build web，通过发布到GitHu
阅读更多...
C语言深度剖析--不定期更新的第四弹

C语言深度剖析--不定期更新的第四弹

哈哈哈哈哈哈，今天一天两更！ void关键字 void关键字不能用来定义变量，原因是void本身就被编译器解释为空类型，编译器强制地不允许定义变量 定义变量的本质是：开辟空间 而void 作为空类型，理论上不应该开辟空间（针对编译器而言），即使开辟了空间，也只是作为一个占位符看待（针对Linux来说） 所以，既然无法开辟空间，也无法作为正常变量使用，既然无法使用，干脆编译器不让它编译变
阅读更多...
Flutter 中的低功耗蓝牙概述

Flutter 中的低功耗蓝牙概述

随着智能设备数量的增加，控制这些设备的需求也在增加。对于多种使用情况，期望设备在需要进行控制的同时连接到互联网会受到很大限制，因此是不可行的。在这些情况下，使用低功耗蓝牙（也称为 Bluetooth LE 或 BLE）似乎是最佳选择，因为它功耗低，在我们的手机中无处不在，而且无需连接到更广泛的网络。因此，蓝牙应用程序的需求也在不断增长。 通过阅读本文，您将了解如何开始在 Flutter 中开
阅读更多...
一文说清什么是AI原生（AI Native)应用以及特点

一文说清什么是AI原生（AI Native)应用以及特点

引言：智能新纪元 如今，走在街头，哪儿不被智能科技包围？智能音箱、自动驾驶汽车、聊天机器人......这些都在用不同的方式提升我们的生活体验。然而，究竟什么才能称得上“AI原生应用”呢？ 什么是AI原生？   AI原生不仅仅是简单地引入人工智能功能。真正的AI原生应用犹如一个智慧的“大脑”，它的每一个决策都依赖于深度学习与数据分析。以Siri为例，它通过学习用户的习惯和需求，提供个性化的
阅读更多...
flutter开发多端平台应用的探索 下 （跨模块、跨语言通信之平台通道）

flutter开发多端平台应用的探索 下 （跨模块、跨语言通信之平台通道）

前文 Flutter 是一个跨平台的开发框架，它允许开发者使用相同的代码库来构建 iOS、Android、Web 和桌面应用程序。 上文flutter开发多端平台应用的探索 上（基本操作）-CSDN博客列举了一些特定平台的case（桌面端菜单，鼠标快捷键）的使用方法，有些是flutter提供了对应能力，只需要学习如何调API，有些事三方库支持，本文要探讨的平台通道是更为强大的工具，很多三方插件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2