Flutter案例日程安排首页效果 Lottie动画与Shimmer实现的微光效果

案例效果:
在这里插入图片描述
Flutter使用的版本 3.13.8,使用fvm管理版本。
在这里插入图片描述
加载动态地图示例,使用的是 lottie。

  Container buildMapWidget() {return Container(height: 360,padding: const EdgeInsets.only(top: 100, right: 40, left: 40, bottom: 50),decoration: BoxDecoration(color: Colors.red.shade100),width: double.infinity,child: Lottie.asset("assets/88146-event-venue.json"),);}

Lottie是一个适用于Android和iOS的移动库,它解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动设备上原生渲染它们!

这个存储库是纯Dart中Lottie安卓库的非官方转换。它适用于Android、iOS、macOS、linux、windows和web。

本文章使用的 lottie 库是 2.7.0版本。

lottie: 2.7.0

加载文本特效使用的是 Shimmer

Shimmer.fromColors(baseColor: Colors.black,highlightColor: Colors.red,child: const Text('制定一个日程安排?',textAlign: TextAlign.center,style: TextStyle(fontSize: 32.0,fontWeight: FontWeight.bold,),),
)

Shimmer库,用于在Flutter项目中添加微光效果的一个包,本项目使用的是3.0.0版本

shimmer: 3.0.0

加载中的占位使用的也是 Shimmer


Row(children: [Expanded(child: Shimmer.fromColors(baseColor: Colors.grey.shade200,highlightColor: Colors.grey.shade300,child: Container(width: 180,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(3)),padding: const EdgeInsets.all(8),),),),const SizedBox(width: 10),Expanded(child: Shimmer.fromColors(baseColor: Colors.grey.shade200,highlightColor: Colors.grey.shade300,child: Container(width: 100,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(3)),padding: const EdgeInsets.all(8),),),)
]),

完整源码在这里

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

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

相关文章

Activiti6工作流引擎:Form表单

表单约等于流程变量。StartEvent 有一个Form属性,用于关联流程中涉及到的业务数据。 一:内置表单 每个节点都可以有不同的表单属性。 1.1 获取开始节点对应的表单 Autowired private FormService formService;Test void delopyProcess() {ProcessEngi…

C++ RBTree 理论

目录 这个性质可以总结为 红黑树的最短最长路径 红黑树的路径范围 code 结构 搞颜色 类 插入 插入逻辑 新插入节点 思考:2. 检测新节点插入后,红黑树的性质是否造到破坏? 解决方法 变色 旋转变色 第三种情况,如果根…

Flutter笔记:光影动画按钮、滚动图标卡片组等

Flutter笔记 scale_design更新:光影动画按钮、滚动图标卡片组 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 :291148484163.com 本文地址:https://blog.csdn.net/qq_28550263…

HBuilderX 运行Android App项目至雷电模拟器

一、下载安装HBuilderX HBuildeX官网 安装最新的正式版,或者点击历史版本查看更多版本;【ps:Alpha版本为开发版,功能更多,但是也不稳定,属于测试版本】 直接将压缩包解压,运行HBuildeX即可。 二…

数据结构从未如此简单——图(一)

文章目录 前言图的初印象教科书力扣工作中的实际应用我们的学习方法 前言 个人感觉数据结构学习最大的难点就是抽象。这些概念和算法都是从许多源问题中抽离、精炼、总结出来的。我们学习的看似是最精华的部分,但是忽略了推导过程,很容易变成死记硬背&a…

Java学习 10.Java-数组习题

一、创建一个 int 类型的数组, 元素个数为 100, 并把每个元素依次设置为 1 - 100 代码实现 public static void main(String[] args) {int[] arrnew int[100];for (int i 0; i < arr.length; i) {arr[i]i1;}System.out.println(Arrays.toString(arr));} 运行结果 二、改变…

react类式组件的生命周期和useEffect实现函数组件生命周期

概念 生命周期是一个组件丛创建,渲染,更新,卸载的过程,无论是vue还是react都具有这个设计概念,也是开发者必须熟练运用的,特别是业务开发,不同的生命周期做不同的事是很重要的. ....多说两句心得,本人是先接触vue的,无论是vue2还是vue3的生命周期,在理解和学习上都会比react更…

Spring IoC注解式开发

2023.11.11 注解的存在主要是为了简化XML的配置。Spring6倡导全注解开发。 负责声明Bean的注解&#xff0c;常见的包括四个&#xff1a; ComponentControllerServiceRepository 通过源码可以发现&#xff0c;Controller、Service、Repository这三个注解都是Component注解的别名…

【pytorch深度学习】使用张量表征真实数据

使用张量表征真实数据 本文为书pytorch深度学习实战的一些学习笔记和扩展知识&#xff0c;涉及到的csv文件等在这里不会给出&#xff0c;但是我会尽量脱离这一些文件将书本想要表达的内容给展示出来。 文章目录 使用张量表征真实数据1. 加载图像文件2. 改变布局3. 加载目录下…

【Gradle-12】分析so文件和依赖的关系

1、前言 在包大小的占比中&#xff0c;so文件的占比往往是最高的&#xff0c;动辄几兆的大小多一个都会把包大小的指标打爆。 而在各厂商要求对手机CPU ARM架构进行分包适配的情况下&#xff0c;你更需要知道哪些依赖是没有适配v7a/v8a的&#xff0c;这将影响你的APP在应用市场…

Vue3 + Naive-ui Data Table 分页页码显示不全

当使用naive-ui 表格并且使用分页组件的时候 需要增加 remote

C++使用线程池模拟异步事件处理机制

在C很多框架中都有异步事件处理机制&#xff0c;这导致我们在看源码时经常很疑惑&#xff0c;难以理解&#xff0c;而其中包含的编程套路可能是一些成熟的技术&#xff0c;只是我们不熟悉&#xff0c;比如WebRTC中类似于Qt的信号槽机制&#xff0c;线程事件处理, 或者使用系统异…

Sensor 点亮出图后,颜色偏红或者偏绿是为什么?

这是因为 sensor balck level 的值配置的不正确导致&#xff0c;black level 的值一般在效果参数的 calibration 参数里面。 在驱动调试阶段&#xff0c;我们一般都是复用其他已调试好的&#xff0c;sensor 的驱动文件及效果文件&#xff0c; 而不同 sensor 的 balck level 的…

【qemu逃逸】XCTF 华为高校挑战赛决赛-pipeline

前言 虚拟机用户名: root 无密码 设备逆向与漏洞分析 程序没有去符合, 还是比较简单. 实例结构体如下: 先总体说一下流程: encode 为 base64 编码函数, decode 为 base64 解码函数. 然后 encPipe 和 decPipe 分别存放编码数据和解码数据, 分别有四个: 其中 EncPipeLine 中…

网页推理游戏

目录 python challenge &#xff08;0&#xff09; &#xff08;1&#xff09; &#xff08;2&#xff09; The Riddle &#xff08;1&#xff09; &#xff08;2&#xff09; &#xff08;3&#xff09; &#xff08;4&#xff09; Nazo &#xff08;1&#xff09;…

【Spring】SpringBoot日志

SpringBoot日志 日志概述日志使用打印日志获取日志对象使用日志对象打印日志日志框架介绍门面模式SLF4J框架介绍(simple logging facade for java) 日志格式说明日志级别日志级别的分类日志级别的使用 日志配置配置日志级别日志持久化配置日志文件的路径和文件名配置日志文件的…

【tgcalls】Instance接口的实例类的创建

tg 里有多个版本,因此设计了版本管理的map,每次可以选择一个版本进行实例创建这样,每个客户端就可以定制开发了。tg使用了c++20创建是要传递一个描述者,里面是上下文信息 G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\Instance.cpp可以看到竟然是…

【数据结构】顺序表 | 详细讲解

在计算机中主要有两种基本的存储结构用于存放线性表&#xff1a;顺序存储结构和链式存储结构。本篇文章介绍采用顺序存储的结构实现线性表的存储。 顺序存储定义 线性表的顺序存储结构&#xff0c;指的是一段地址连续的存储单元依次存储链性表的数据元素。 线性表的&#xf…

单词规律问题

给定一种规律 pattern 和一个字符串 s &#xff0c;判断 s 是否遵循相同的规律。 这里的 遵循 指完全匹配&#xff0c;例如&#xff0c; pattern 里的每个字母和字符串 s 中的每个非空单词之间存在着双向连接的对应规律。 示例1: 输入: pattern “abba”, s “dog cat cat d…

【Git】Git分支与标签掌握这些技巧让你成为合格的码农

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Git》。&#x1f3af;&#x1f3af; &#x1f449…