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

 1、UI效果图:





2、中间镂空UI:

class CenterTransparentMask extends CustomClipper<Path> {
  final double? width;

  CenterTransparentMask({this.width});

  @override
  Path 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; 
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

3、扫码UI:
class ScanWidget extends StatefulWidget {
  const ScanWidget({super.key});

  @override
  State<ScanWidget> createState() => _ScanWidgetState();
}

class _ScanWidgetState extends State<ScanWidget> with TickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController _controller;

  @override
  void 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();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget 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";
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Go语言中如何正确使用 errgroup

不管是哪种编程语言,重新发明轮子都不是一个好主意。代码库重新实现如何启动多个goroutine并汇总错误也很常见。但是Go生态系统中的一个包旨在支持这种常见的用例。让我们来看看这个包并了解为什么它应该成为Go开发人员工具集的一部分。 golang.org/x是一个为标准库提供扩展的…

树上启发式合并(dsu on tree)学习

声明&#xff1a;本文部分内容摘自OI Wiki网站。详情可自行查看学习。 洛谷 P9233 题目实际上是蓝桥杯 2023 年 A 组省赛的一道题。题干大致的意思是&#xff0c;给定一个含有 n n n 个结点&#xff0c;并且以 1 1 1 为根的一棵树&#xff0c;每个节点 i i i 都有一个颜色 …

Spring框架第一篇(Spring概述与IOC思想)

文章目录 一、Spring概述二、Spring家族三、Spring Framework四、IOC思想五、IOC容器在Spring中的实现 一、Spring概述 Spring 是最受欢迎的企业级 Java 应用程序开发框架&#xff0c;数以百万的来自世界各地的开发人员使用 Spring 框架来创建性能好、易于测试、可重用的代码。…

Harbor私有镜像仓库

Docker私有仓库Harbor ​ 前面学习了Docker及Dockerfile构建镜像&#xff0c;那么构建的镜像放在哪里才能被Docker容器快速获取到呢&#xff1f;我们知道&#xff0c;可以把镜像放入Docker Hub镜像仓库&#xff0c;但是Docker Hub是国外网站&#xff0c;一方面镜像放在Docker …

童年女神大盘点:谁是第一个让你心动的动漫女神?

每当提起我们的童年记忆&#xff0c;总有一抹亮丽的色彩来自于那些国产动漫中的女性角色&#xff0c;她们以其独特的魅力、鲜明的性格和卓越的才智&#xff0c;深深地烙印在了我们的心底&#xff0c;成为了一代人的集体回忆。今天&#xff0c;让我们一同回首&#xff0c;盘点那…

napi系列学习进阶篇——NAPI异步调用

简介 OpenHarmony Napi 标准系统异步接口实现支持Callback方式和Promise方式。标准系统异步接口实现规范要求&#xff0c;若引擎开启Promise特性支持&#xff0c;则异步方法必须同时支持Callback方式和Promise方式。使用哪种方式由应用开发者决定&#xff0c;通过是否传递Call…

全新4.0版本圈子社交论坛系统 ,可打包小程序,于TP6+uni-app 全开源 可打包小程序app uniapp前端+全开源+独立版

简述 首先 圈子系统的核心是基于共同的兴趣或爱好将用户聚集在一起&#xff0c;这种设计使得用户能够迅速找到与自己有共同话题和兴趣的人。 其次 圈子系统提供了丰富的社交功能&#xff0c;如发帖、建圈子、发活动等&#xff0c;并且支持小程序授权登录、H5和APP等多种形式…

R语言记录过程

如何使用这个函数as.peakData 函数构造过程 出现问题是缺少函数的问题 up不告诉我&#xff0c;这里是代表c,h,o的值&#xff0c;你从里面获取把值&#xff0c;设置成c,h,o就可以了 现在开始测试参数 第一次 startRow : 开始查找数据的第一行。不管startRow的值是多少&#xff…

openstack-镜像服务 3

Glance镜像服务 创建glacnce数据库 创建glance用户并创建服务实体及api端点 安装glance软件包 修改配置文件 同步到数据库 设置开机自启并查看日志目录 使用测试镜像验证服务

10分钟带你学会配置DNS服务正反向解析

正向解析 服务端IP客户端IP网址192.168.160.134192.168.160.135www.openlab.com 一、首先做准备工作&#xff1a; 关闭安全软件&#xff0c;关闭防火墙&#xff0c;下载bind软件 [rootserver ~]# setenforce 0 [rootserver ~]# systemctl stop firewalld [rootserver ~]# y…

LeetCode题练习与总结:最小路径和--64

一、题目描述 给定一个包含非负整数的 m x n 网格 grid &#xff0c;请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。 说明&#xff1a;每次只能向下或者向右移动一步。 示例 1&#xff1a; 输入&#xff1a;grid [[1,3,1],[1,5,1],[4,2,1]] 输出…

超级详细的JDBC和数据库连接池讲解

文章目录 JDBC简介概念本质好处 JDBC快速入门JDBC中API详解DriverManager驱动管理类作用注册驱动获取连接 Connection数据库连接对象作用获取执行SQL的对象事务管理 Statement作用执行SQL语句 ResultSet原理使用步骤 PreparedStatementSQL注入获取对象操作步骤 原理好处 JDBC工…

项目管理-项目问题及需求解决要点

综上所述&#xff1a;在项目管理过程中&#xff0c;项目问题和需求逐渐增多&#xff0c;要不断的适应项目的种种&#xff0c;要想到如果没有问题要解决了&#xff0c;你的价值体现在哪里&#xff1f;要这样想&#xff0c;风险也是机会&#xff0c;所以问题等等也是自己的机会&a…

CopyTranslator下载地址及安装教程

CopyTranslator是一款免费且开源的机器翻译工具&#xff0c;旨在提供快速、便捷的翻译服务。它采用了先进的神经网络机器翻译技术&#xff0c;能够提供准确、流畅的翻译结果。 CopyTranslator的特点和功能如下&#xff1a; 多语言翻译&#xff1a;支持多种常见的语言对&#…

Unity让地图素材遮挡人物

点击编辑/项目设置/图形&#xff0c;透明度排序模式设置自定义轴&#xff0c;透明度排序轴Y设置为1其他为0。 此时人物和地图素材的图层排序相等&#xff0c;当人物的高度大于地图素材时&#xff0c;人物则被遮挡。

【零基础学数据结构】双向链表

1.双向链表的概念 1.1头节点 1.2带头双向循环链表 注意&#xff1a; 哨兵位创建后&#xff0c;首尾连接自己 1.3双链表的初始化 // 双向链表的初始化 void ListInit(ListNode** pphead) {// 给双链表创建一个哨兵位*pphead ListBuyNode(-1); } 2.双向链表的打印 // 双向…

Qlik在数据隐私计划中利用人工智能和分析

在技术快速变革的时代&#xff0c;政府正在努力追赶技术发展和我们日常生活中产生的个人身份信息&#xff08;“PII”&#xff09;数量不断增加的步伐。规范 PII 使用的隐私法不断加强&#xff08;Gartner估计&#xff0c;虽然到 2020 年&#xff0c;全面的隐私法将覆盖全球 10…

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

2024年广东省职业院校技能大赛样题1 信息安全管理与评估 网络系统管理 网络搭建与应用 云计算 软件测试 移动应用开发 任务书&#xff0c;赛题&#xff0c;解析等资料&#xff0c;知识点培训服务 添加博主wx&#xff1a;liuliu5488233 网络系统管理赛项 模块A&#xff1a;网络…

Unity给地图物体添加对撞机

在项目/Assets下创建Prefabs文件夹 选择素材拖入层级下&#xff0c;注意此时地图素材有可能看不到&#xff0c;此时选择Tilemap在检查器中修改图层顺序调至最低。 添加对撞机 选择素材&#xff0c;在检查器中点击添加组件Box Collider 2D&#xff0c;将素材拖入Prefabs文件下…

C++ - 二叉搜索树的基本实现

目录 0. 引言 1. 二叉搜索树 1.1 定义 1.2 特点 2. 二叉搜索树的实现 2.1 基本框架 2.2 查找 2.3 插入 2.4 删除 2.4.1 右子树为空 2.4.2 左子树为空 2.4.3 左右都不为空 2.4.4 代码 0. 引言 在C语言数据结构中&#xff0c;我们已经基本了解过二叉树&#xff…