Flutter条形码扫描插件ps_flutter_barcode_scanner的使用

Flutter条形码扫描插件ps_flutter_barcode_scanner的使用

flutter_barcode_scanner

这是一个为Flutter应用添加条形码扫描支持的插件，支持Android和iOS平台。

Demo gif

尝试示例

只需克隆或下载仓库，然后在Android Studio/VS Code中打开项目，打开pubspec.yaml文件并点击Packages get。连接设备后运行run。要在iPhone上运行，你需要首次从Xcode运行，并在example/ios目录下执行pod install，然后从Xcode运行。

开始使用

请遵循以下步骤配置Android和iOS平台。

Android

无需进行任何操作。

iOS - 需要Swift支持

部署目标版本：12

1. 新建项目
  1. 创建一个新的Flutter项目。请检查是否选择了“包含Swift支持”。
  2. 创建完成后，在Xcode中打开/ios项目，设置最低部署目标为12，并将Swift版本设置为5。
  3. 设置好部署目标和Swift版本后，关闭Xcode并在Flutter项目的/ios目录下运行pod install。

完成基本配置后，继续到如何使用部分。

2. 添加到现有项目
如果你的iOS代码已经是Swift
  1. 设置最低部署目标为12，并将Swift版本设置为5。
  2. 关闭Xcode，并在Flutter项目的/ios目录下运行pod install。
  3. 继续到如何使用部分。
如果你的iOS代码是Objective-C
  1. 在不同的位置创建一个同名的新Flutter项目（创建时请确保勾选了“包含Swift支持”）。
  2. 将新创建的/ios文件夹复制并替换现有项目的/ios文件夹。
  3. 打开iOS项目并在Xcode中设置最低部署目标为12，并将Swift版本设置为5。
  4. 在/ios目录下运行pod install。

注意: 如果你之前对iOS部分进行了任何更改，可能需要重新进行这些配置。

如何使用？

iOS

在iOS上使用时，需要添加相机使用描述。在Xcode中打开Info.plist文件并添加相机使用描述：

<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>

Android 和 iOS

在Android和iOS中修改后，在pubspec.yaml文件中添加flutter_barcode_scanner依赖：

dependencies:
  ...
  flutter_barcode_scanner: ^2.0.0

一次性扫描

  1. 首先导入包：
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';
  1. 使用scanBarcode方法来访问条形码扫描功能：
String barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
    COLOR_CODE, 
    CANCEL_BUTTON_TEXT, 
    isShowFlashIcon, 
    scanMode);

这里，在scanBarcode中，

  • COLOR_CODE 是用于条形码覆盖层线条颜色的十六进制颜色值。
  • CANCEL_BUTTON_TEXT 是取消按钮上的文本，可以根据需要自定义。
  • isShowFlashIcon 是一个布尔值，用于显示或隐藏闪光灯图标。
  • scanMode 是一个枚举，用户可以传递QR、BARCODE 或 DEFAULT 中的一个，默认值为QR。

注意: 目前，scanMode仅用于显示条形码和QR码的图形覆盖层。无论选择哪种模式，都会扫描QR码和条形码。

持续扫描

如果需要持续扫描条形码而不关闭摄像头，可以使用FlutterBarcodeScanner.getBarcodeStreamReceiver方法。参数与FlutterBarcodeScanner.scanBarcode相同。

FlutterBarcodeScanner.getBarcodeStreamReceiver("#ff6666", "Cancel", false, ScanMode.DEFAULT)
    .listen((barcode) { 
        // barcode to be used
    });

更多关于Flutter条形码扫描插件ps_flutter_barcode_scanner的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter条形码扫描插件ps_flutter_barcode_scanner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


ps_flutter_barcode_scanner 是一个 Flutter 插件，用于在移动设备上扫描条形码和二维码。它基于 Zebra Crossing (ZXing) 库，支持 Android 和 iOS 平台。

1. 安装插件

首先，在 pubspec.yaml 文件中添加 ps_flutter_barcode_scanner 依赖：

dependencies:
  flutter:
    sdk: flutter
  ps_flutter_barcode_scanner: ^1.0.0  # 请使用最新的版本号

然后运行 flutter pub get 来安装插件。

2. 配置平台

Android 配置

在 android/app/src/main/AndroidManifest.xml 文件中添加相机权限：

<uses-permission android:name="android.permission.CAMERA" />

iOS 配置

在 ios/Runner/Info.plist 文件中添加相机使用描述：

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to scan barcodes.</string>

3. 使用插件

以下是一个简单的示例，展示了如何使用 ps_flutter_barcode_scanner 插件扫描条形码：

import 'package:flutter/material.dart';
import 'package:ps_flutter_barcode_scanner/ps_flutter_barcode_scanner.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Barcode Scanner',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BarcodeScannerScreen(),
    );
  }
}

class BarcodeScannerScreen extends StatefulWidget {
  [@override](/user/override)
  _BarcodeScannerScreenState createState() => _BarcodeScannerScreenState();
}

class _BarcodeScannerScreenState extends State<BarcodeScannerScreen> {
  String _scanResult = 'Scan a barcode';

  Future<void> _scanBarcode() async {
    try {
      final String scanResult = await PsFlutterBarcodeScanner.scanBarcode();
      setState(() {
        _scanResult = scanResult;
      });
    } catch (e) {
      setState(() {
        _scanResult = 'Failed to scan: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_scanResult),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _scanBarcode,
              child: Text('Scan Barcode'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部