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

发布于 1周前 作者 h691938207 来自 Flutter

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

flutter_barcode_scanner_plus 是一个为Flutter应用提供条形码和二维码扫描支持的插件,适用于Android和iOS平台。以下是该插件的详细介绍与使用方法。

插件信息

  • pub package
  • Demo gif

开始使用

项目配置

Android

对于Android平台,无需额外配置,直接添加依赖即可使用。

iOS - 需要Swift支持

  1. Fresh Start:

    • 创建新的Flutter项目时,请确保选择包含对iOS代码的Swift支持。
    • 打开/ios文件夹下的Xcode项目,并将最低部署目标设置为12,Swift版本设置为5。
    • 关闭Xcode后,在Flutter项目的/ios目录下运行pod install
  2. 现有Flutter应用:

    • 如果现有的iOS代码是用Swift编写的,则只需设置最低部署目标为12,Swift版本为5,并在/ios目录中运行pod install
    • 如果现有的iOS代码是Objective-C编写的,则需要创建一个新的Flutter项目(记得选择包含Swift支持),然后将新项目的/ios文件夹复制并替换现有项目的/ios文件夹,再进行上述配置步骤。

权限配置

为了在iOS上使用相机权限,需在Info.plist中添加如下内容:

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

如何使用

添加依赖

pubspec.yaml文件中添加以下依赖:

dependencies:
  ...
  flutter_barcode_scanner_plus: ^3.0.7

使用示例

导入包

首先需要导入此插件:

import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';

单次扫描

可以通过调用scanBarcode方法来执行单次扫描操作:

String barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
  "#ff6666", // 线条颜色
  "取消",    // 取消按钮文本
  true,      // 是否显示闪光灯图标
  ScanMode.BARCODE // 扫描模式 (QR, BARCODE, DEFAULT)
);

连续扫描

如果需要连续扫描而不需要关闭摄像头,可以使用getBarcodeStreamReceiver方法:

FlutterBarcodeScanner.getBarcodeStreamReceiver("#ff6666", "Cancel", false, ScanMode.DEFAULT)
         .listen((barcode) { 
         /// 处理扫描结果
         });

完整示例代码

下面是一个完整的Flutter应用程序示例,展示了如何集成并使用flutter_barcode_scanner_plus插件进行条形码和二维码的扫描。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_barcode_scanner_plus/flutter_barcode_scanner_plus.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _scanBarcode = 'Unknown';

  Future<void> startBarcodeScanStream() async {
    FlutterBarcodeScanner.getBarcodeStreamReceiver(
            '#ff6666', 'Cancel', true, ScanMode.BARCODE)!
        .listen((barcode) => print(barcode));
  }

  Future<void> scanQR() async {
    String barcodeScanRes;
    try {
      barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
          '#ff6666', 'Cancel', true, ScanMode.QR);
      print(barcodeScanRes);
    } on PlatformException {
      barcodeScanRes = 'Failed to get platform version.';
    }
    if (!mounted) return;

    setState(() {
      _scanBarcode = barcodeScanRes;
    });
  }

  Future<void> scanBarcodeNormal() async {
    String barcodeScanRes;
    try {
      barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
          '#ff6666', 'Cancel', true, ScanMode.BARCODE);
      print(barcodeScanRes);
    } on PlatformException {
      barcodeScanRes = 'Failed to get platform version.';
    }
    if (!mounted) return;

    setState(() {
      _scanBarcode = barcodeScanRes;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: const Text('Barcode scan')),
            body: Builder(builder: (BuildContext context) {
              return Container(
                  alignment: Alignment.center,
                  child: Flex(
                      direction: Axis.vertical,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        ElevatedButton(
                            onPressed: () => scanBarcodeNormal(),
                            child: Text('Start barcode scan')),
                        ElevatedButton(
                            onPressed: () => scanQR(),
                            child: Text('Start QR scan')),
                        ElevatedButton(
                            onPressed: () => startBarcodeScanStream(),
                            child: Text('Start barcode scan stream')),
                        Text('Scan result : $_scanBarcode\n',
                            style: TextStyle(fontSize: 20))
                      ]));
            })));
  }
}

通过以上步骤,您可以轻松地在Flutter应用中实现条形码和二维码的扫描功能。如果有任何问题或建议,欢迎联系开发者或提交贡献。


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

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_barcode_scanner_plus插件的详细代码示例。这个插件允许你在Flutter应用中集成条形码扫描功能。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加flutter_barcode_scanner_plus的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_barcode_scanner_plus: ^4.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

2. 请求相机权限(仅适用于Android和iOS)

在Android上,你需要在AndroidManifest.xml文件中请求相机权限:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" />

在iOS上,你需要在Info.plist文件中添加相机权限的描述:

<key>NSCameraUsageDescription</key>
<string>需要访问相机以扫描条形码</string>

3. 使用插件扫描条形码

下面是一个完整的示例,展示如何在Flutter中使用flutter_barcode_scanner_plus插件来扫描条形码。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScanBarcodeScreen(),
    );
  }
}

class ScanBarcodeScreen extends StatefulWidget {
  @override
  _ScanBarcodeScreenState createState() => _ScanBarcodeScreenState();
}

class _ScanBarcodeScreenState extends State<ScanBarcodeScreen> {
  String? result;

  Future<void> _scanBarcode() async {
    try {
      final result = await FlutterBarcodeScannerPlus.scanBarcode(
        // 自定义配置,例如闪光灯、蜂鸣器等
        config: BarcodeScannerConfig(
          beepOnScan: true,
          useCamera: CameraType.back,
        ),
      );
      setState(() {
        this.result = result?.rawContent ?? 'No content';
      });
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          result = '相机访问被拒绝';
        });
      } else {
        setState(() {
          result = '无法扫描条形码: ${e.message}';
        });
      }
    } catch (e) {
      setState(() {
        result = '未知错误: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('条形码扫描示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              result ?? '扫描条形码',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _scanBarcode,
              child: Text('扫描条形码'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

确保你已经连接了Android设备或启动了iOS模拟器,然后运行flutter run来启动应用。你应该会看到一个按钮,点击按钮后应用会请求相机权限并开始扫描条形码。

注意事项

  • 确保你的设备或模拟器上安装了相机驱动,并且相机工作正常。
  • 在实际项目中,建议添加更多的错误处理和用户提示,以提高用户体验。

希望这个示例能帮助你在Flutter项目中成功集成条形码扫描功能!

回到顶部