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

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

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

flutter_barcode_scanner 是一个用于Flutter应用的插件,它为Android和iOS平台添加了条形码扫描支持。以下是详细的使用说明,包括如何配置项目以及示例代码。

安装与配置

Android 配置

对于Android平台,无需额外配置。直接在pubspec.yaml中添加依赖即可。

dependencies:
  flutter_barcode_scanner: ^2.0.0

iOS 配置 - 需要Swift支持

新建项目

  1. 创建一个新的Flutter项目,并确保选中包含iOS代码的Swift支持
  2. 打开/ios目录下的项目文件,在Xcode中设置最低部署目标为12,并将Swift版本设置为5。
  3. 关闭Xcode后,在Flutter项目的/ios目录下运行pod install命令。

现有项目

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

权限配置

为了在iOS上正常使用摄像头权限,需在Info.plist文件中添加以下键值对:

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

使用方法

单次扫描

首先导入包:

import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';

接着调用scanBarcode方法实现单次扫描功能:

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

连续扫描

若需要连续扫描而不停止摄像头,可以使用getBarcodeStreamReceiver方法:

FlutterBarcodeScanner.getBarcodeStreamReceiver(
  "#ff6666", 
  "Cancel", 
  false, 
  ScanMode.DEFAULT
).listen((barcode) { 
  // 处理接收到的条形码数据
});

示例代码

下面是一个完整的Dart文件示例,展示了如何集成并使用flutter_barcode_scanner插件来实现条形码和二维码的扫描功能:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.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_barcode_scanner插件的基本介绍及使用指南。希望这些信息能够帮助您快速上手并在您的Flutter项目中集成条形码扫描功能。如果有任何问题或需要进一步的帮助,请随时联系开发者社区或者查阅官方文档。


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

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_barcode_scanner插件的一个示例。这个插件允许你在Flutter应用中实现条形码和二维码的扫描功能。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_barcode_scanner: ^3.0.1  # 请检查最新版本号

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

2. 导入插件

在你需要使用条形码扫描功能的Dart文件中导入插件:

import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';

3. 请求权限

在Android设备上,你需要请求相机权限。在android/app/src/main/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" />

4. 扫描条形码或二维码

下面是一个简单的示例,展示如何启动扫描器并处理扫描结果:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Barcode Scanner Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _startBarcodeScan,
            child: Text('Scan Barcode'),
          ),
        ),
      ),
    );
  }

  Future _startBarcodeScan() async {
    try {
      String result = await FlutterBarcodeScanner.scanBarcode(
        "#ff0000",  // 扫描框颜色 (可选)
        "Cancel",  // 取消按钮文本 (可选)
        true,      // 是否启用闪光灯 (可选)
        ScanOptions.builder()
            .setBeepEnabled(true)
            .setOrientationLocked(false)
            .setCaptureActivity(false)
            .setPreferFrontCamera(false)
            .build()  // 构建扫描选项 (可选)
      );
      if (!result.isEmpty) {
        // 处理扫描结果
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text('Scan Result'),
              content: Text(result),
              actions: <Widget>[
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('OK'),
                ),
              ],
            );
          },
        );
      }
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text('Camera Access Denied'),
              content: Text('Please grant camera permission to scan barcode.'),
              actions: <Widget>[
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('OK'),
                ),
              ],
            );
          },
        );
      } else {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text('Error'),
              content: Text(e.message),
              actions: <Widget>[
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('OK'),
                ),
              ],
            );
          },
        );
      }
    } catch (e) {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('Error'),
            content: Text(e.toString()),
            actions: <Widget>[
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('OK'),
              ),
            ],
          );
        },
      );
    }
  }
}

5. 运行应用

确保你的设备或模拟器已经启用了相机权限,然后运行你的Flutter应用。点击“Scan Barcode”按钮即可启动扫描器,扫描结果将显示在一个对话框中。

这个示例展示了如何使用flutter_barcode_scanner插件进行基本的条形码扫描操作。你可以根据需求进一步定制和扩展功能。

回到顶部