Flutter中间镂空的二维码扫描控件

 1、UI效果图:





2、中间镂空UI:

class CenterTransparentMask extends CustomClipper<Path> {final double? width;CenterTransparentMask({this.width});@overridePath getClip(Size size) {final path = Path()..addRect(Rect.fromLTWH(0, 0, size.width,size.height + MediaQuery.of(Get.context!).padding.bottom))..addRect(Rect.fromLTWH((size.width - (width ?? 200)) / 2,(size.height +MediaQuery.of(Get.context!).padding.bottom -(width ?? 200)) /2,width ?? 200,width ?? 200));return path..fillType = PathFillType.evenOdd; }@overridebool shouldReclip(CustomClipper<Path> oldClipper) {return false;}
}
3、扫码UI:
class ScanWidget extends StatefulWidget {const ScanWidget({super.key});@overrideState<ScanWidget> createState() => _ScanWidgetState();
}class _ScanWidgetState extends State<ScanWidget> with TickerProviderStateMixin {late Animation<double> animation;late AnimationController _controller;@overridevoid initState() {super.initState();initAnima();}void initAnima() {_controller = AnimationController(duration: const Duration(seconds: 4),vsync: this,);animation = Tween(begin: -100.0, end: 100.0).animate(_controller)..addListener(() {if (mounted) setState(() => {});});_controller.repeat();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Stack(alignment: Alignment.center,children: [_scanBorder(),_scanCenter(context),Transform.translate(offset: Offset(0, animation.value),child: _scanLine(),),],);}Widget _scanCenter(BuildContext context) {return ClipPath(clipper: CenterTransparentMask(), child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),child: Container(color: Colors.black.withOpacity(0.5),width: SystemUtil().getScreenWidth(context),height: SystemUtil().getScreenHeight(context),),),);}Widget _scanBorder() {return Image.asset(ImageUtils.getImgPath("img_border", "scan"),width: 200,height: 200,);}Widget _scanLine() {return Image.asset(ImageUtils.getImgPath("image_line", "scan"),width: 200,height: 6,);}
}

3、图片加载工具类:

class ImageUtils {static String getImgPath(String name, String moduleName,{String format = "png"}) {return "assets/images/$moduleName/$name.$format";}
}

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

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

相关文章

34-5 CSRF漏洞 - CSRF分类

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 1)GET 类型 传参: 参数连接在URL后面 POC构造及执行流程: 构造URL,诱导受害者访问点击利用利用标签进行攻击: 构造虚假URL,在链接上添加payload抓包获取数据包,通过CSRF POC…

【日常记录】【CSS】生成动态气泡小球

文章目录 1、分析2、实现 1、分析 核心有两点&#xff0c;通过这两个不一样就可以实现每个小球的颜色、动画时间不一致 给每个元素都设置一个css 变量 bgc 用于控制每一个小球的颜色给每个元素都设置一个css 变量 duration 用于控制每一个小球的时间 2、实现 <!DOCTYPE ht…

王道C语言督学营OJ课后习题(课时17)

#include <iostream> #include <stdlib.h> #include <time.h> #include <stdio.h> typedef int ElemType; typedef struct {ElemType *elem;int TableLen; }SSTable; void Init_ST(SSTable &ST,int len)//申请空间&#xff0c;并进行随机数生成 {S…

研发岗-面临统信UOS系统配置总结

第一步 获取root权限 配置环境等都需要用到root权限&#xff0c;所以我们先获取到root权限&#xff0c;方便下面的操作 下载软件 在UOS应用商店下载的所需应用 版本都比较低 安装node 官网下载了【arm64】的包&#xff0c;解压到指定文件夹&#xff0c;设置链接&#xff0…

前端css笔记(pink老师)

css css书写顺序 自适应屏幕 html { width: 100%; height: 100%; display: table; } body { display: table-cell; } 用了这个方法以后&#xff0c;如果希望页面内的盒子也适应屏幕大小&#xff0c;则使用以下方法&#xff0c;会根据父亲的宽高计算出该盒子的宽高 width:xx%; …

蓝桥杯物联网竞赛_STM32L071KBU6_全部工程及国赛省赛真题及代码

包含stm32L071kbu6全部实验工程、源码、原理图、官方提供参考代码及国、省赛真题及代码 链接&#xff1a;https://pan.baidu.com/s/1pXnsMHE0t4RLCeluFhFpAg?pwdq497 提取码&#xff1a;q497

LeetCode700:验证二叉搜索树

题目描述 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉搜索树。 代码 使用中序…

【系统分析师】操作系统部分

文章目录 1、进程状态2、前趋图3、PV操作4、死锁问题5、存储管理5.1 页式存储5.2 段式存储5.3 段页式存储5.4 页面置换算法 6、文件管理6.1 索引文件结构6.2 空闲存储空间管理 7、设备管理7.1数据传输控制7.2 虚设备和SPOOLING技术7.3 微内核操作系统7.4 嵌入式操作系统 说明&a…

安装ODBC方法

1、运行 搜索 ODBC数据源管理程序 32位或者 64位 2、在用户DSN或者系统DSN选择添加&#xff08;建议前者&#xff09;&#xff0c;此处以添加access数据库的odbc驱动为例 3、安装成功

Mac的终端配置

Mac的终端配置 参考教程包管理工具 - Homebrew出现的问题用虚拟环境解决方案&#xff1a;直接将解释器的路径放过去错误方法&#xff1a;用find查找到虚拟环境安装的路径&#xff0c;其链接的是brew安装的python路径 编辑器没有报错&#xff0c;但是运行过程中仍然找不到pandas…

2024年广东省网络系统管理样题第1套网络搭建部分

2024年广东省职业院校技能大赛样题1 极安云科专注职业教育技能竞赛培训4年&#xff0c;包含信息安全管理与评估、网络系统管理、网络搭建等多个赛项及各大CTF模块培训学习服务。本团队基于赛项知识点&#xff0c;提供完整全面的系统性理论教学与技能培训&#xff0c;成立至今持…

2024 Guitar Pro 8.1.2-27 (x64) win/mac中文激活版破解版

吉他爱好者必备神器&#xff1a;Guitar Pro v8.1.1 Build 17深度解析 随着数字音乐制作和学习的日益普及&#xff0c;越来越多的吉他爱好者开始寻找能够帮助他们提升技能、创作音乐的专业工具。在众多吉他制作软件中&#xff0c;Guitar Pro因其强大的功能和易用的界面备受推崇…