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;@overrideState<QrScanAppBar> createState() => _QrScanAppBarState();
}class _QrScanAppBarState extends State<QrScanAppBar> {@overrideWidget 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;@overrideState<QrScanPage> createState() => _QrScanPageState();
}class _QrScanPageState extends State<QrScanPage> {ScanController scanController = ScanController();String qrcode = 'Unknown';bool torchOn = false;@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overridevoid 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);@overrideWidget 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二维码条形码扫一扫功能实现相关推荐

77、基于STM32单片机的超市餐饮二维码/条形码摄像头识别结账扫码系统设计
毕设帮助.开题指导.技术解答(有偿)见文末. 目录摘要一.硬件方案二.设计功能三.实物图四.原理图五.PCB图六.程序源码七.资料包括摘要二维码识别系统是集数据采集,识别,以及显示 ...
iOS 扫描二维码/条形码
级别:★★☆☆☆ 标签:「iOS 原生扫描」「AVCaptureSession」「AVCaptureDevice」「rectOfInterest」作者: Xs·H 审校: QiShare团队最近做 ...
iOS开发-定制多样式二维码
iOS开发-定制多样式二维码二维码/条形码是按照某种特定的几何图形按一定规律在平台(一维/二维方向上)分布的黑白相间的图形纪录符号信息.使用若干个与二进制对应的几何形体来表示文字数值信息. 最常 ...
Android 二维码/条形码的识别或生成
序言二维码/条形码是生活中非常常见的技术,只要通过手机或者扫码枪扫描一下就能读取到里面的信息,给我们的生活带来了很多的便利.在Android开发当中,这也是很常用的技术.本文主要简单的介绍所用到的工 ...
Android使用ZBar扫描二维码/条形码（实例）+常见问题汇总
写在前面:因项目需求,需要实现二维码扫码功能,笔者测试过多种开源扫码工具,但因不跨平台.扫描速度慢等问题逐个放弃,最后选用ZBar实现功能,笔者发现ZBar扫码在跨主流手机平台.扫码速度等方面有较明显 ...
iOS 生成二维码/条形码
级别:★★☆☆☆ 标签:「iOS CIFilter」「CIQRCodeGenerator」「CICode128BarcodeGenerator」「二维码加logo」作者: Xs·H 审校: QiSh ...
iOS开发——高级篇——二维码的生产和读取
一.二维码的生成从iOS7开始集成了二维码的生成和读取功能此前被广泛使用的zbarsdk目前不支持64位处理器生成二维码的步骤: 导入CoreImage框架通过滤镜CIFilter生成二维码 ...
微信小程序 - 二维码数据解析，如何扫码进入开发版测试二维码数据
1.生成二维码在小程序开发中,经常需要用到通过分享小程序二维码,进行扫码进入小程序. 官方文档生成小程序二维码接口,这个生成接口可以放置服务器使用. page:是扫码之后需要打开的小程序页面 sc ...
二维码条形码生成打印软件C#源码，根据变量自动添加抬头
二维码条形码生成打印软件C#源码,根据变量自动添加抬头,非常方便,工控朋友可以直接拿过去使用,完整源码 16100635774317133鲲鹏自动化