Flutter条形码扫描插件scan

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

插件介绍

scan_barcode 是一个用于扫描条形码的Flutter插件，仅支持Android和iOS。该插件基于Google MLKit开发。

查看APK，请访问：release

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
  scan_barcode: ^0.2.0

或者通过Git克隆：

scan_barcode:
  git:
    url: https://gitee.com/kikt/scan_barcode.git
    ref: git-ref

示例代码

以下是一个完整的示例demo，展示了如何使用scan_barcode插件进行条形码扫描。

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

class ScanAndPopPageExample extends StatefulWidget {
  const ScanAndPopPageExample({Key? key}) : super(key: key);

  @override
  State<ScanAndPopPageExample> createState() => _ScanAndPopPageExampleState();
}

class _ScanAndPopPageExampleState extends State<ScanAndPopPageExample> {
  var isPop = false;

  @override
  Widget build(BuildContext context) {
    return BarcodeWidget(
      onHandleBarcodeList: (List<Barcode> barcode) async {
        if (ispop ) { // 防止多次弹出
          return;
        }
        if (barcode.isEmpty) return;
        isPop = true;
        Navigator.of(context).pop(barcode);
      },
      scanValue: ScanValue(),
    );
  }
}

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

class ShowDialogExample extends StatelessWidget {
  const ShowDialogExample({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BarcodeScanPage(
      title: 'Show dialog when scanned',
      onHandleBarcodeList: (List<Barcode> barCode) async {
        if (barCode.isEmpty) return;
        await showBarcodeListDialog(
            context, barCode); // 确保等待显示对话框
      },
    );
  }

  Future<void> showBarcodeListDialog(BuildContext context, List<Barcode> barCode) async {
    await showDialog(
      context: context,
      builder: (context) =&gt;
          AlertDialog(
            title: const Text('Barcode list'),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                for (final barcode in barCode)
                  ListTile(
                    title: Text(barcode.rawValue ?? ''),
                    subtitle:
                    Text('type: ${barcode.type}, format: ${barcode.format}'),
                    trailing: IconButton(
                      icon: const Icon(Icons.copy),
                      onPressed: () {
                        Clipboard.setData(
                          ClipboardData(text: barcode.rawValue ?? ''),
                        );
                      },
                    ),
                  ),
              ],
            ),
            actions: [
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text('OK'),
              ),
            ],
          ),
    );
  }
}

依赖项

flutter
camera
google_mlkit_barcode_scanning

兼容Flutter 2.x

由于上游API修改，仅0.1.0版本可以在Flutter 2.x上使用。请在pubspec.yaml中添加以下代码：

dependencies:
  scan_barcode: ^0.1.0

dependency_overrides:
  google_mlkit_barcode_scanning:
    git:
      url: https://gitee.com/kikt/Google-Ml-Kit-plugin.git
      ref: barcode-0.5.0-forked
      path: packages/google_mlkit_barcode_scanning

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

ionicwang 1楼•5 天前

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

当然，下面是一个关于如何在Flutter项目中使用scan_barcode插件进行条形码扫描的示例代码。这个示例展示了如何集成插件、请求权限、以及启动扫描器并处理扫描结果。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加scan_barcode依赖：

dependencies:
  flutter:
    sdk: flutter
  scan_barcode: ^2.0.0  # 请检查最新版本号

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

2. 请求权限（Android）

由于扫描条形码通常需要使用相机，你需要在Android的AndroidManifest.xml文件中请求相机权限。这个步骤通常插件会自动处理，但为了确保，你可以检查或手动添加：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

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

3. 使用`scan_barcode`插件

在你的Dart代码中，你可以按照以下步骤使用scan_barcode插件：

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

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

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

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

class _ScanBarcodeScreenState extends State<ScanBarcodeScreen> {
  String _result = '';

  Future<void> _scanBarcode() async {
    try {
      String result = await ScanBarcode.scanBarcode(
        '#FF0000', // 可选：指定扫描框的颜色
        'Cancel', // 可选：取消按钮的文本
        orientation: BarcodeScannerOrientation.portrait, // 可选：扫描器的方向
        beepOnScan: true, // 可选：扫描成功时是否发出声音
      );
      setState(() {
        _result = result;
      });
    } catch (e) {
      setState(() {
        _result = 'Error: ${e.message}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Scan Result:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            Text(
              _result,
              style: TextStyle(fontSize: 24, color: Colors.blue),
            ),
            SizedBox(height: 40),
            ElevatedButton(
              onPressed: _scanBarcode,
              child: Text('Scan Barcode'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

确保你的设备或模拟器具有相机权限，并且相机工作正常。然后运行你的Flutter应用，点击“Scan Barcode”按钮，应用将启动相机并尝试扫描条形码。扫描成功后，结果将显示在屏幕上。

这个示例展示了基本的条形码扫描功能。根据你的需求，你可以进一步自定义扫描器的行为，例如处理不同的条形码格式、优化UI等。

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