Flutter二维码的生成与扫描识别

因项目需要,Flutter项目需要加入生成二维码和扫描二维码的功能,在网上一阵搜索,找到了一位大佬的教程,真心不错,借鉴一下,以备后用。

原文链接:

二维码扫描:https://blog.csdn.net/qq_35905501/article/details/89467886

 

说明:项目基于Android Studio  Flutter,环境自行搭建

 

一:生成二维码

flutter库链接:https://pub.dev/packages/qr_flutter

导入包:qr_flutter: ^3.2.0

导入引用 :import 'package:qr_flutter/qr_flutter.dart';

主要部分代码:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("二维码"),
    ),
    body: _createBody(),
  );
}

Widget _createBody(){
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Center(
        child: QrImage(
          data: "Flutter生成二维码文字",                             //生成二维码的文字
          size: 200.0,                                              //生成二维码大小
          embeddedImage: AssetImage("images/image_logo_wechat.png"),//二维码中心图片
          embeddedImageStyle: QrEmbeddedImageStyle(
            size: Size(30, 30),                                     //二维码中心图片大小
          ),
        ),
      )
    ],
  );
}

图片:


 

二,扫描识别二维码、条形码

flutter库链接:https://pub.dev/packages/qrscan#-readme-tab-

导入包:qrscan: ^0.2.17 #扫描二维码

引入文件:import 'package:qrscan/qrscan.dart' as scanner;

主要部分代码:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("二维码"),
    ),
    body: _createBody(),
  );
}

Widget _createBody(){
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Center(
        child: BigButton(
          "开启扫描",
          onTap: scan,
          radius: 100,
        ),
      ),
      Padding (
        padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        child: Text(barcode, textAlign: TextAlign.center,),
      )
    ],
  );
}


Future scan() async {
  try {
    String barcode = await scanner.scan();
    setState(() => this.barcode = barcode);
  } on Exception catch (e) {
    if (e == scanner.CameraAccessDenied) {
      setState(() {
        this.barcode = '没有拍照权限!';
      });
    } else {
      setState(() => this.barcode = '未知错误: $e');
      print(e);
    }
  }
}

 

图片:


 

扫描二维码需要请求拍照权限,这里先不描述,可在应用管理手动打开。

至此,flutter嵌入二维码的生成和扫描识别就全部实现。

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Flutter 应用程序中实现二维码扫描,可以使用 `qr_code_scanner` 或 `barcode_scan` 插件。 `qr_code_scanner` 插件提供了一个 `QRView` widget,可以轻松地将二维码扫描器集成到应用程序中。以下是一个简单的示例: 1. 添加 `qr_code_scanner` 插件到 `pubspec.yaml` 文件中: ``` dependencies: qr_code_scanner: ^0.4.3 ``` 2. 导入 `qr_code_scanner` 包: ``` import 'package:qr_code_scanner/qr_code_scanner.dart'; ``` 3. 创建一个 `QRViewController` 和一个 `QRView`: ``` QRViewController controller; final GlobalKey qrKey = GlobalKey(debugLabel: 'QR'); @override Widget build(BuildContext context) { return QRView( key: qrKey, onQRViewCreated: _onQRViewCreated, ); } void _onQRViewCreated(QRViewController controller) { this.controller = controller; controller.scannedDataStream.listen((scanData) { // 处理扫描到的二维码 }); } ``` 当用户扫描二维码时,`QRViewController` 会不断发送扫描数据到 `scannedDataStream`,可以在监听函数中处理这些数据。 如果想要更多的控制权,可以使用 `barcode_scan` 插件。这个插件提供了一个 `scan()` 方法,可以启动一个新的扫描器界面,并且可以自定义扫描器的外观和行为。以下是一个简单的示例: 1. 添加 `barcode_scan` 插件到 `pubspec.yaml` 文件中: ``` dependencies: barcode_scan: ^2.0.0 ``` 2. 导入 `barcode_scan` 包: ``` import 'package:barcode_scan/barcode_scan.dart'; ``` 3. 调用 `scan()` 方法并处理返回的数据: ``` Future<void> scan() async { String barcode = await BarcodeScanner.scan(); // 处理扫描到的二维码 } ``` 在调用 `scan()` 方法时,会启动一个新的扫描器界面,并等待用户扫描二维码。当用户扫描二维码后,会返回扫描到的数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值