第四百四十一回 再谈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包"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/804024.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

视频插针调研

视频插针调研

视频插针 1、评估指标2、准确度3、实时4、视频流处理3、实时RIFE视频插帧测试 1、评估指标 参考：https://blog.csdn.net/weixin_43478836/article/details/104159648 https://blog.csdn.net/weixin_43605641/article/details/118088814 PSNR和SSIM PSNR数值越大表…
阅读更多...
面试准备 集合 List

面试准备 集合 List

ArrayList 底层实现 使用Object[] 动态数组进行存储 特性 支持存储null值非线程安全支持快速访问 初始化方法 无参–返回一个空的列表（DEFAULTCAPACITY_EMPTY_ELEMENTDATA）指定初始容量： new ArrayList(20);指定集合 new ArrayList(col…
阅读更多...
Opencv驱动摄像头

Opencv驱动摄像头

Opencv驱动摄像头&#xff0c;此段代码只能驱动电脑自带摄像头&#xff0c;目前没有分析出为何不能驱动另外连接的相机&#xff01; #include<iostream> #include<opencv2\core.hpp> #include<opencv2\highgui.hpp> #include<opencv2\imgproc.hpp> #i…
阅读更多...
ubuntu下NTFS分区无法访问挂载-解决办法！

ubuntu下NTFS分区无法访问挂载-解决办法！

Ubuntu系统下&#xff0c;有的时候发现&#xff0c;挂载的NTFS文件系统硬盘无法访问。点击弹出类似问题&#xff1a; Error mounting /dev/sda1 at /media/root/新加卷: Command-line mount -t "ntfs" -o "uhelperudisks2,nodev,nosuid,uid0,gid0" "/…
阅读更多...
Linux下的C语言文件编程

Linux下的C语言文件编程

概念引入 window &#xff0c;linux如何修改一个文件&#xff0c;比如写一个word文档&#xff1a; 打开/创建文件 -->编辑文件 -->保存文件 -->关闭文件 我们需要使用代码自动化完成以上操作: 操作系统(linux)给我们提供了一系列的API: 打开&#xff1a; open 读写:…
阅读更多...
【攻防世界】mfw（.git文件泄露）

【攻防世界】mfw（.git文件泄露）

首先进入题目环境&#xff0c;检查页面、页面源代码、以及URL&#xff1a; 发现页面无异常。 使用 dirsearch 扫描网站&#xff0c;检查是否存在可访问的文件或者文件泄露&#xff1a; 发现 可访问界面/templates/ 以及 .git文件泄露&#xff0c;故使用 GItHack 来查看泄露的 …
阅读更多...
C语言奇技淫巧之--用宏定义替换函数名的另外一种思路

C语言奇技淫巧之--用宏定义替换函数名的另外一种思路

时间有限&#xff0c;简要记录原理。 快速回忆要点&#xff1a; #if definde(FEATURE_A) #define myfunc _myfunc #endif int myfunc(int a, int b) 场景&#xff1a; 假设某个功能函数针对不同的makefile配置需要有不同的函数名字&#xff0c;通常做法如下&#xff1a; #if …
阅读更多...
传统方法（OpenCV）_车道线识别

传统方法（OpenCV）_车道线识别

一、思路 基于OpenCV的库&#xff1a;对视频中的车道线进行识别 1、视频处理&#xff1a;视频读取 2、图像转换&#xff1a;图像转换为灰度图 3、噪声去除&#xff1a;高斯模糊对图像进行去噪&#xff0c;提高边缘检测的准确性 4、边缘检测&#xff1a;Canny算法进行边缘检测…
阅读更多...
状态模式（行为型）

状态模式（行为型）

目录 一、前言 二、状态模式 三、总结 一、前言 状态模式(State Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许一个对象在其内部状态改变时改变它的行为。对象看起来好像修改了它的类&#xff0c;但实际上&#xff0c;由于状态模式的引入&#xff0c;行为的变…
阅读更多...
Python单元测试pytest捕获日志输出

Python单元测试pytest捕获日志输出

使用pytest进行单元测试时&#xff0c;遇到了需要测试日志输出的情况&#xff0c;查看了文档 https://docs.pytest.org/en/latest/how-to/capture-stdout-stderr.html https://docs.pytest.org/en/latest/how-to/logging.html 然后试了一下&#xff0c;捕捉logger.info可以用…
阅读更多...
CentOS 7.9 额外安装一个Python3.x版本详细教程

CentOS 7.9 额外安装一个Python3.x版本详细教程

Centos7默认的python版本是2.7&#xff0c;根据需要我们额外安装一个Python3.x版本。 1、安装基础环境 yum update -yyum -y groupinstall "Development tools"yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc …
阅读更多...
ArchiveBo

ArchiveBo

目录 1、 ArchiveBo 2、 BackResponseBo 3、 RelationshipVoKey 3.1、 * 内容主键 3.2、 * 项目主键
阅读更多...
大语言模型及提示工程在日志分析任务中的应用 | 顶会IWQoS23 ICPC24论文分享

大语言模型及提示工程在日志分析任务中的应用 | 顶会IWQoS23 ICPC24论文分享

本文是根据华为技术专家陶仕敏先生在2023 CCF国际AIOps挑战赛决赛暨“大模型时代的AIOps”研讨会闪电论文分享环节上的演讲整理成文。 BigLog&#xff1a;面向统一日志表示的无监督大规模预训练方法 BigLog: Unsupervised Large-scale Pre-training for a Unified Log Represen…
阅读更多...
【azure笔记 1】容器实例管理python sdk封装

【azure笔记 1】容器实例管理python sdk封装

容器实例管理python sdk封装 测试结果 说明 这是根据我的需求写的&#xff0c;所以有些参数是写死的&#xff0c;比如cpu核数和内存&#xff0c;你可以根据你的需要自行修改。前置条件&#xff1a; 当前环境已安装python3.8以上版本和azure cli并且已经登陆到你的账户 依赖安…
阅读更多...
学习java第三十八天

学习java第三十八天

Spring事务传播行为&#xff1a; PROPAGATION_REQUIRED(默认) 如果当前没有事务&#xff0c;就新建一个事务&#xff0c;如果已经存在一个事务中&#xff0c;加入到这个事务中 PROPAGATION_SUPPORTS 支持当前事务&#xff0c;如果当前没有事务&#xff0c;就以非事务方式执行…
阅读更多...
RocketMQ之Topic和Tag最佳实践

RocketMQ之Topic和Tag最佳实践

一、Topic是什么&#xff1f;它的作用&#xff1f; Topic即主题&#xff0c;是消息队列中用于对消息进行分类和组织的一种机制&#xff0c;它有以下三种作用&#xff1a; 标识消息分类&#xff1a;RocketMQ的主题用于对消息进行分类和组织。通过为不同类型的消息分配不同的主题…
阅读更多...
Python八股文：基础知识Part1

Python八股文：基础知识Part1

1. 不用中间变量交换 a 和 b 这是python非常方便的一个功能可以这样直接交换两个值 2. 可变数据类型字典在for 循环中进行修改 这道题在这里就是让我们去回答输出的内容&#xff0c;这里看似我们是在for循环中每一次加入了都在list中加入了一个字典&#xff0c;然后字典的键值…
阅读更多...
本地项目提交 Github

本地项目提交 Github

工具 GitIdeaGithub 账号 步骤 使用注册好的 Github 账号&#xff0c;登陆 Github&#xff1b; 创建 Repositories (存储库)&#xff0c;注意填写图上的红框标注&#xff1b; 创建完成之后&#xff0c;找到存储库的 ssh 地址或 https 地址&#xff0c;这取决于你自己的配置…
阅读更多...
TiDB 组件 GC 原理及常见问题

TiDB 组件 GC 原理及常见问题

本文详细介绍了 TiDB 的 Garbage Collection&#xff08;GC&#xff09;机制及其在 TiDB 组件中的实现原理和常见问题排查方法。 TiDB 底层使用单机存储引擎 RocksDB&#xff0c;并通过 MVCC 机制&#xff0c;基于 RocksDB 实现了分布式存储引擎 TiKV&#xff0c;以支持高可用分…
阅读更多...
云服务运维

云服务运维

监控指标介绍 服务器监控 CPU状态&#xff1a;cpu使用率、负载 内存状态&#xff1a;应用内存使用率、物理内存使用量 磁盘状态&#xff1a;分区大小、使用趋势 IO状态&#xff1a;IOPS、MBPS、每秒读写速率、await 网卡状态&#xff1a;网络出入流量Bps、pps、丢包率、TCP状…
阅读更多...
最新文章

Copyright @ 2022~2023