Flutter 二维码扫描

1:barcode_scan: ^3.0.1

优点:集成快,不需要过多的配置即可兼容。
缺点:暂时无FLutter2.0之后的空安全版本。且mac的M1芯片使用该插件无法打包。

import 'package:flutter/services.dart';
import 'package:barcode_scan/platform_wrapper.dart';

class Barcode {
  //扫描得到的二维码
  String _qrCode = '';

  Future scan() async {
    try {
      var result = await BarcodeScanner.scan();
      String scanData = result.rawContent;
      _qrCode = scanData;
      print('扫码结果: ' + _qrCode.toString());
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.cameraAccessDenied) {
        // 未授予APP相机权限
        print('未授予APP相机权限');
      } else {
        // 扫码错误
        print('扫码错误: $e');
      }
    } on FormatException {
      // 进入扫码页面后未扫码就返回
      print('进入扫码页面后未扫码就返回');
    } catch (e) {
      // 扫码错误
      print('扫码错误: $e');
    }
    return _qrCode;
  }

  String get qrCode => _qrCode;

  set qrCode(String value) {
    _qrCode = value;
  }
}

使用

Barcode barcode = new Barcode();
barcode.scan();

2:scan: ^0.0.7(flutter2.0前的最后一个版本)

优点:版本更新快,Flutter2.0有空安全版本。可以自定义扫码界面,可扩展性强。
缺点:可能低版本的在android的个别机型会出现一些问题。

仅供参考

import 'package:flutter/material.dart';
import '../styles/app_style.dart';
import 'package:scan/scan.dart';

class BarcodeScan extends StatefulWidget {
  final Function scanCode;

  const BarcodeScan({Key key, this.scanCode}) : super(key: key);

  @override
  _BarcodeScanState createState() => _BarcodeScanState();
}

class _BarcodeScanState extends State<BarcodeScan> {
  ScanController controller = ScanController();
  bool flashFlag = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Stack(
          children: [_scan(), _backIcon(), _title(), _hintText(), _flashIcon()],
        ),
      ),
    );
  }

  Widget _scan() {
    ///加column防止页面报错
    return Column(
      children: [
        Expanded(
            child: Container(
          child: ScanView(
            controller: controller,
            scanAreaScale: .7,
            scanLineColor: KColor.primaryColor,
            onCapture: (qrCode) {
              setState(() {
                Navigator.pop(context);
                widget.scanCode(qrCode);
              });
            },
          ),
        )),
      ],
    );
  }

  /// < 返回
  Widget _backIcon() {
    return Padding(
      padding: EdgeInsets.only(left: 15.px, top: 55.px),
      child: InkWell(
        child: Icon(
          Icons.arrow_back_ios_outlined,
          color: Colors.white,
        ),
        onTap: () => Navigator.pop(context),
      ),
    );
  }

  Widget _title() {
    return Padding(
      padding: EdgeInsets.only(left: 165.px, top: 55.px),
      child: Text(
        '扫一扫',
        style: TextStyle(fontSize: 15.px, color: Colors.white),
      ),
    );
  }

  Widget _hintText() {
    return Padding(
      padding: EdgeInsets.only(left: 87.px, top: 555.px),
      child: Text(
        '将二维码放入框内,即可自动扫码',
        style: TextStyle(fontSize: 12.px, color: Colors.white),
      ),
    );
  }

  Widget _flashIcon() {
    return Container(
      margin: EdgeInsets.only(left: 332.px, top: 55.px),
      width: 27.px,
      child: InkWell(
        child: Image.asset(
          flashFlag
              ? 'images/icon-flash-on.png'
              : 'images/icon-flash-off.png',
          color: Colors.white,
        ),
        onTap: () {
          setState(() {
            controller.toggleTorchMode();
            flashFlag = !flashFlag;
          });
        },
      ),
    );
  }
}

使用

Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
                return new BarcodeScan(scanCode: (qrCode){print('$qrCode');});
              }));

下面是图片
在这里插入图片描述

闪光灯图片:
icon-flash-off.png
在这里插入图片描述
icon-flash-on.png
在这里插入图片描述

若不喜欢上面图片的话可以上图库自行搜索下载
https://www.iconfont.cn/home/index

关于选择本地图片扫描之类的可以参考官方文档进行查阅
https://pub.dev/packages/scan/versions/0.0.7

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在 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()` 方法时,会启动一个新的扫描器界面,并等待用户扫描二维码。当用户扫描二维码后,会返回扫描到的数据。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值