当前位置: 首页 > news >正文

flutter开发实战-flutter二维码条形码扫一扫功能实现

flutter开发实战-flutter二维码条形码扫一扫功能实现

flutter开发实战-flutter二维码扫一扫功能实现,要使用到摄像头的原生的功能,使用的是插件:scan

效果图如下

在这里插入图片描述

一、扫一扫插件scan

  # 扫一扫scan: ^1.6.0

1.1 iOS权限设置

<key>NSCameraUsageDescription</key>
<string>Your Description</string><key>io.flutter.embedded_views_preview</key>
<string>YES</string>

1.2 android权限设置

<uses-permission android:name="android.permission.CAMERA" /><application><meta-dataandroid:name="flutterEmbedding"android:value="2" />
</application>

1.3 使用ScanView的widget

ScanController controller = ScanController();
String qrcode = 'Unknown';Container(width: 250, // custom wrap sizeheight: 250,child: ScanView(controller: controller,
// custom scan area, if set to 1.0, will scan full areascanAreaScale: .7,scanLineColor: Colors.green.shade400,onCapture: (data) {// do something},),
),

扫一扫Widget使用ScanController来做响应的控制

暂停/恢复camera

controller.pause();
controller.resume();

识别图片的二维码结果

String result = await Scan.parse(imagePath);

闪光灯切换

controller.toggleTorchMode();

二、代码实现

实现自定义扫码的appBar

class QrScanAppBar extends StatefulWidget {const QrScanAppBar({Key? key,required this.toolbarHeight,this.elevation,this.backgroundColor,this.leadingWidget,this.trailingWidget,this.centerWidget,this.brightness,this.padding, this.barPadding,}) : super(key: key);final double toolbarHeight;final double? elevation;final Color? backgroundColor;final Widget? leadingWidget;final Widget? trailingWidget;final Widget? centerWidget;final Brightness? brightness;final EdgeInsetsGeometry? padding;final EdgeInsetsGeometry? barPadding;State<QrScanAppBar> createState() => _QrScanAppBarState();
}class _QrScanAppBarState extends State<QrScanAppBar> {Widget build(BuildContext context) {final SystemUiOverlayStyle overlayStyle =widget.brightness == Brightness.dark? SystemUiOverlayStyle.light: SystemUiOverlayStyle.dark;Widget leadingWidget = (widget.leadingWidget ?? Container());Widget centerWidget = (widget.centerWidget ?? Container());Widget trailingWidget = (widget.trailingWidget ?? Container());return AnnotatedRegion<SystemUiOverlayStyle>(//套AnnotatedRegion是为了增加状态栏控制value: overlayStyle,child: Material(//套Material是为了增加elevationelevation: widget.elevation ?? 0,color: Colors.transparent,child: Container(padding: widget.padding,height: widget.toolbarHeight + ScreenUtil().statusBarHeight,decoration: BoxDecoration(color: widget.backgroundColor,),child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(height: ScreenUtil().statusBarHeight,),Expanded(child: Container(padding: widget.barPadding,height: widget.toolbarHeight,alignment: Alignment.center,child: Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(height: widget.toolbarHeight,child: leadingWidget,),Expanded(child: Container(alignment: Alignment.center,height: widget.toolbarHeight,child: centerWidget,),),Container(height: widget.toolbarHeight,child: trailingWidget,),],),),)],),),),);}
}

实现扫一扫界面

class QrScanPage extends StatefulWidget {const QrScanPage({Key? key, this.arguments}) : super(key: key);final Object? arguments;State<QrScanPage> createState() => _QrScanPageState();
}class _QrScanPageState extends State<QrScanPage> {ScanController scanController = ScanController();String qrcode = 'Unknown';bool torchOn = false;void initState() {// TODO: implement initStatesuper.initState();}void dispose() {// TODO: implement disposescanController.pause();super.dispose();}void changedTorchMode() {scanController.toggleTorchMode();if (torchOn == true) {torchOn = false;} else {torchOn = true;}setState(() {});}void refreshScan() {scanController.resume();}// controller.resume();// controller.pause();// String result = await Scan.parse(imagePath);Widget build(BuildContext context) {return Scaffold(body: Stack(children: [buildQrScanView(context),Positioned(child: buildAppBar(context),),],),);}Widget buildQrScanView(BuildContext context) {double width = MediaQuery.of(context).size.width;double height = MediaQuery.of(context).size.height;double scanW = width * 0.75;double scanMY = (height - scanW) / 2.0 + scanW + 15.0;return Container(alignment: Alignment.center,child: Stack(alignment: Alignment.center,children: [ScanView(controller: scanController,// custom scan area, if set to 1.0, will scan full areascanAreaScale: 0.75,scanLineColor: Colors.green.shade400,onCapture: (data) {// do somethingLoggerManager().debug("onCapture:${data}");openQrScanWebPage(data);},),Positioned(top: scanMY,child: buildOption(context, scanMY),),],),);}Widget buildAppBar(BuildContext context) {return QrScanAppBar(toolbarHeight: 44.0,backgroundColor: Colors.transparent,padding: EdgeInsets.symmetric(horizontal: 10.0),barPadding: EdgeInsets.symmetric(vertical: 4.0),leadingWidget: Container(alignment: Alignment.center,child: QrscanButton(bgColor: ColorUtil.hexColor(0xA9A9A9),bgHighlightedColor: ColorUtil.hexColor(0xf0f0f0),borderColor: Colors.transparent,onPressed: () {navigatorBack();},borderRadius: 18.0,height: 36.0,width: 36.0,child: ImageHelper.wrapAssetAtImages("icons/ic_scan_navback.png",width: 36.0,height: 36.0,fit: BoxFit.fill,),),),centerWidget: Text(S.of(context).qrScan,textAlign: TextAlign.center,softWrap: true,style: TextStyle(fontSize: 17,color: ColorUtil.hexColor(0xffffff),fontWeight: FontWeight.w600,fontStyle: FontStyle.normal,decoration: TextDecoration.none,),),trailingWidget: Container(width: 32.0,height: 32.0,),);}Widget buildOption(BuildContext context, double originY) {return Container(height: ScreenUtil().screenHeight - originY,width: ScreenUtil().screenWidth,child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(width: 300.0,child: Text(S.of(context).qrScanBottomTip,textAlign: TextAlign.center,softWrap: true,style: TextStyle(fontSize: 15,fontWeight: FontWeight.w500,fontStyle: FontStyle.normal,color: Colors.white,decoration: TextDecoration.none,),),),SizedBox(height: 25.0,),buildButtons(context),Expanded(child: Container(),),],),);}Widget buildButtons(BuildContext context) {return Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Padding(padding: EdgeInsets.symmetric(horizontal: 20.0),child: QrscanButton(bgColor: ColorUtil.hexColor(0x35fb99),bgHighlightedColor: Colors.green.shade400,onPressed: () {changedTorchMode();},width: 100.0,height: 50.0,borderRadius: 25.0,child: Text((torchOn? S.of(context).qrScanTorchOff: S.of(context).qrScanTorchOn),textAlign: TextAlign.center,softWrap: true,style: TextStyle(fontSize: 14,color: ColorUtil.hexColor(0xffffff),fontWeight: FontWeight.w600,fontStyle: FontStyle.normal,decoration: TextDecoration.none,),),),),Padding(padding: EdgeInsets.symmetric(horizontal: 20.0),child: QrscanButton(bgColor: ColorUtil.hexColor(0x35fb99),bgHighlightedColor: Colors.green.shade400,onPressed: () {refreshScan();},width: 100.0,height: 50.0,borderRadius: 25.0,child: Text(S.of(context).qrScanRefresh,textAlign: TextAlign.center,softWrap: true,style: TextStyle(fontSize: 14,color: ColorUtil.hexColor(0xffffff),fontWeight: FontWeight.w600,fontStyle: FontStyle.normal,decoration: TextDecoration.none,),),),),],);}void navigatorBack() {NavigatorPageRouter.pop();}void openQrScanWebPage(String data) {Map<String, dynamic> args = {};args["url"] = data;/// true保留跳转的当前栈   false 不保留NavigatorPageRouter.pushReplacementNamed(RouterName.web,arguments: args,);}
}

三、小结

flutter开发实战-flutter二维码扫一扫功能实现,要使用到摄像头的原生的功能,使用的是插件:scan,实现自定义Appbar。

学习记录,每天不停进步。

相关文章:

flutter开发实战-flutter二维码条形码扫一扫功能实现

flutter开发实战-flutter二维码条形码扫一扫功能实现 flutter开发实战-flutter二维码扫一扫功能实现&#xff0c;要使用到摄像头的原生的功能&#xff0c;使用的是插件&#xff1a;scan 效果图如下 一、扫一扫插件scan # 扫一扫scan: ^1.6.01.1 iOS权限设置 <key>NSCa…...

一篇文章了解Redis分布式锁

Redis分布式锁 什么是分布式锁&#xff1f; ​ redis分布式锁是一种基于redis实现的锁机制&#xff0c;它用于在多并发分布式环境下控制并发访问共享资源。在多个应用程序或是进程访问共享资源时&#xff0c;分布式锁可以确保只有一个进程可以访问该资源&#xff0c;不会发生…...

记录第一次组装电脑遇到的坑

京东装机大师配置清单如下&#xff1a; 主板cpu安装 本次安装拆了两次主板 原因1.主板侧面有个金属板需要从内部安装 2.cpu风扇有个板需要装在主板底下 显卡比较大个要最后装&#xff0c;要不然可能要拆好几次 装系统时候 u盘启动认不出来&#xff0c;他妈的是因为机箱上的usb…...

右键pdf文件没有打印

问题描述 右键点pdf文件&#xff0c;弹出的菜单找不到打印选项。网上找了很多办法&#xff0c;然并卵啊。还是得靠自己慢慢摸索。 原因分析 新安装的win11系统&#xff0c;pdf文件默认可以用windows自带的edge浏览器打开。但是edge浏览器没有能力提供右键打印功能。 解决办法…...

什么是CDN?CDN的原理和作用是什么?

一&#xff1a;什么是CDN CDN全称Content Delivery Network&#xff0c;即内容分发网络。 CDN是Content Delivery Network&#xff08;内容分发网络&#xff09;的缩写&#xff0c;是一种利用分布式节点技术&#xff0c;在全球部署服务器&#xff0c;即时地将网站、应用、视频…...

链路传播(Propagate)机制及使用场景

服务间链路追踪传播机制是指在微服务架构中&#xff0c;通过记录和跟踪服务之间的请求和响应信息&#xff0c;来实现对服务间链路的追踪和监控。这种机制可以帮助开发人员快速定位服务间出现的问题&#xff0c;并进行优化和调整。 具体来说&#xff0c;服务间链路追踪传播机制…...

pytorch技巧总结1:学习率调整方法

pytorch技巧总结1&#xff1a;学习率调整方法 前言 ​ 这个系列&#xff0c;我会把一些我觉得有用、有趣的关于pytorch的小技巧进行总结&#xff0c;希望可以帮助到有需要的朋友。 免责申明 ​ 本人水平有限&#xff0c;若有误写、漏写&#xff0c;请大家温柔的批评指正。 目录…...

谈谈VPN是什么、类型、使用场景、工作原理

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 前言 本文将讲解VPN是什么、以及它的类型、使用场景、工作原理。 目录 一、VPN是什么&#xff1f; 二、VPN的类型 1、站点对站点VPN 2、…...

windows 下载安装Redis,并配置开机自启动

windows 下载安装Redis&#xff0c;并配置开机自启动 1. 下载 地址&#xff1a;https://github.com/tporadowski/redis/releases Redis 支持 32 位和 64 位。这个需要根据你系统平台的实际情况选择&#xff0c;这里我们下载 Redis-x64-xxx.zip压缩包&#xff0c;之后解压 打…...

2. CSS3的新特性

2.1CSS3的现状 ●新增的CSS3特性有兼容性问题, ie9才支持 ●移动端支持优于PC端 ●不断改进中 ●应用相对广泛 ●现阶段主要学习: 新增选择器和盒子模型以及其他特性 CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素&#xff1a; 1.属性选择器 2.结构伪类选择器…...

从零开始训练神经网络

用Keras实现一个简单神经网络 Keras&#xff1a; Keras是由纯python编写的基于theano/tensorflow的深度学习框架。 Keras是一个高层神经网络API&#xff0c;支持快速实验&#xff0c;能够把你的idea迅速转换为结果&#xff0c;如果有如下需 求&#xff0c;可以优先选择Keras&a…...

连接区块链节点的 JavaScript 库 web3.js

文章目录 前言web3.js 介绍web3.js安装web3.js库模块介绍连接区块链节点向区块链网络发送数据查询区块链网络数据 前言 通过前面的文章我们可以知道基于区块链开发一个DApp&#xff0c;而DApp结合了智能合约和用户界面&#xff08;客户端&#xff09;&#xff0c;那客户端是如…...

js:scroll平滑滚动页面或元素到顶部或底部的方案汇总

目录 1、CSS的scroll-behavior2、Element.scrollTop3、Element.scroll()/Window.scroll()4、Element.scrollBy()/Window.scrollBy()5、Element.scrollTo()/Window.scrollTo()6、Element.scrollIntoView()7、自定义兼容性方案8、参考文章 准备知识&#xff1a; scrollWidth: 是…...

【Docker】Docker的部署含服务和应用、多租环境、Linux内核的详细介绍

前言 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 &#x1f4d5;作者简介&#xff1a;热…...

C国演义 [第五章]

第五章 子集题目理解步骤树形结构递归函数递归结束的条件单层逻辑 代码 子集II题目理解步骤树形结构递归函数递归结束的条件单层逻辑 代码 子集 力扣链接 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。…...

Proxy-Reflect使用详解

1 监听对象的操作 2 Proxy类基本使用 3 Proxy常见捕获器 4 Reflect介绍和作用 5 Reflect的基本使用 6 Reflect的receiver Proxy-监听对象属性的操作(ES5) 通过es5的defineProperty来给对象中的某个参数添加修改和获取时的响应式。 单独设置defineProperty是只能一次设置一…...

【Linux后端服务器开发】Shell外壳——命令行解释器

目录 一、Shell外壳概述 二、描述Shell外壳原理的生动例子 三、C语言模拟实现Shell外壳 一、Shell外壳概述 在狭义上 , 我们称Linux操作系统的内核为 Linux 在广义上 , Linux发行版 Linux内核 外壳程序 就比如市面上现在的redhat, centos, ubuntu等等我们耳熟能详的Linux发…...

【无公网IP】在外Windows远程连接MongoDB数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 转载自cpolar极点云文章&#xff1a;公网远程…...

mac python3 安装virtualenv

第一步&#xff0c;执行安装virtualenv pip3 install virtualenv 注意&#xff1a;如果出现WARNING: The script virtualenv is installed in ‘/home/local/bin’ which is not on PATH. Consider adding this directory to PATH or, if you prefer to suppress this warning,…...

网络安全(自学笔记)

如果你真的想通过自学的方式入门web安全的话&#xff0c;那建议你看看下面这个学习路线图&#xff0c;具体到每个知识点学多久&#xff0c;怎么学&#xff0c;自学时间共计半年左右&#xff0c;亲测有效&#xff08;文末有惊喜&#xff09;&#xff1a; 1、Web安全相关概念&am…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

【Axure高保真原型】图片列表添加和删除图片

今天和大家分享图片列表添加和删除图片的原型模板&#xff0c;效果包括&#xff1a; 点击图片列表的加号可以显示图片选择器&#xff0c;选择里面的图片&#xff1b; 选择图片后点击添加按钮&#xff0c;可以将该图片添加到图片列表&#xff1b; 鼠标移入图片列表的图片&…...

如何使用CodeRider插件在IDEA中生成代码

一、环境搭建与插件安装 1.1 环境准备 名称要求说明操作系统Windows 11JetBrains IDEIntelliJ IDEA 2025.1.1.1 (Community Edition)硬件配置推荐16GB内存50GB磁盘空间 1.2 插件安装流程 步骤1&#xff1a;市场安装 打开IDEA&#xff0c;进入File → Settings → Plugins搜…...

NamedParameterJdbcTemplate 使用方法及介绍

NamedParameterJdbcTemplate是 Spring 框架中用于数据库操作的核心类之一&#xff0c;它拓展了JdbcTemplate&#xff0c;通过封装实现命名参数特性&#xff0c;相比传统占位符?&#xff0c;命名参数可读性和维护性更强&#xff0c;能有效避免参数顺序混淆问题。 一、核心支持…...

Flask与Celery 项目应用(shared_task使用)

目录 1. 项目概述主要功能技术栈 2. 项目结构3. 环境设置创建虚拟环境并安装依赖主要依赖 4. 应用配置Flask应用初始化 (__init__.py)Celery应用初始化 (make_celery.py) 5. 定义Celery任务 (tasks.py)任务说明 6. 创建API端点 (views.py)API端点说明 7. 前端界面 (index.html)…...