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

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

Barras简介

Barras 是一个简单且可定制的 Flutter 条形码扫描插件，适用于 Android 和 iOS。它在 iOS 上使用 AVCaptureSession，在 Android 上使用 ZXing。请注意，Barras 目前处于实验性和早期开发阶段。

开始使用

需求

• 权限：Barras 需要相机使用权限，无论是在 iOS 还是 Android 上。你需要自行实现权限请求，或者使用像 permission_handler 这样的插件来处理权限。
• 依赖项：
  • Flutter 2.10.5 或更高版本
  • Android API 26 (Marshmallow) 或更新版本
  • iOS 9.0 或更新版本

在代码中导入和使用

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

   dependencies:
     barras: ^0.2.1
   

2. 导入插件：在 Dart 代码中导入 Barras：

   import 'package:barras/barras.dart';
   

3. 调用扫描方法：通过调用 Barras.scan 方法打开条形码扫描页面。返回的数据将为 null，如果用户按下取消按钮或导航返回。

   // 打开条形码读取页面。返回的数据将在用户按下取消按钮或导航返回时为 null
   final data = await Barras.scan(context);
   

4. 自定义扫描页面：你可以通过传递参数来自定义条形码扫描页面的外观，例如改变扫描框的颜色、大小和闪烁速度。返回的数据将为 null，如果用户按下取消按钮或导航返回。

   // 打开条形码读取页面。自定义外观，改变扫描框颜色、大小和闪烁速度。返回的数据将在用户按下取消按钮或导航返回时为 null
   final data = await Barras.scan(
     context,
     viewfinderHeight: 120,  // 扫描框高度
     viewfinderWidth: 300,   // 扫描框宽度
     scrimColor: Color.fromRGBO(128, 0, 0, 0.5),  // 背景遮罩颜色
     borderColor: Colors.red,  // 边框颜色
     borderRadius: 24,  // 边框圆角半径
     borderStrokeWidth: 2,  // 边框宽度
     buttonColor: Colors.yellow,  // 按钮颜色
     borderFlashDuration: 250,  // 边框闪烁持续时间（毫秒）
     cancelButtonText: "取消",  // 取消按钮文本
     successBeep: false,  // 成功扫描后是否播放提示音
   );
   

示例代码

以下是一个完整的示例应用，展示了如何使用 Barras 插件进行条形码扫描，并自定义扫描页面的外观。

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

void main() => runApp(const App());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "Barras reader",
      home: HomePage(),
    );
  }
}

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

  [@override](/user/override)
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  String _scannedCode = "";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Barras Sample App"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            _buildBarcodeLabel(),
            _buildDefaultScanButton(context),
            _buildCustomScanButton(context),
          ],
        ),
      ),
    );
  }

  // 构建显示最后扫描的二维码的文本组件
  Widget _buildBarcodeLabel() {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.deepPurple),
        borderRadius: BorderRadius.circular(16.0),
      ),
      height: 224.0,
      padding: const EdgeInsets.all(16.0),
      margin: const EdgeInsets.only(bottom: 8.0),
      child: Text(
        _scannedCode,
        textAlign: TextAlign.center,
        maxLines: 4,
        softWrap: true,
      ),
    );
  }

  // 构建打开默认设置的Barras扫描器的按钮
  Widget _buildDefaultScanButton(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        foregroundColor: Colors.blueAccent,
        backgroundColor: Colors.white,
      ),
      onPressed: () async {
        // 打开条形码读取页面。返回的数据将在用户按下取消按钮或导航返回时为 null
        final data = await Barras.scan(context);

        setState(() {
          _scannedCode = data ?? "";
        });
      },
      child: const Text('OPEN DEFAULT SCANNER'),
    );
  }

  // 构建打开自定义设置的Barras扫描器的按钮
  Widget _buildCustomScanButton(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        foregroundColor: Colors.deepPurple,
        backgroundColor: Colors.white,
      ),
      onPressed: () async {
        // 打开条形码读取页面。自定义外观，改变扫描框颜色、大小和闪烁速度。返回的数据将在用户按下取消按钮或导航返回时为 null
        final data = await Barras.scan(
          context,
          viewfinderHeight: 120,  // 扫描框高度
          viewfinderWidth: 300,   // 扫描框宽度
          scrimColor: const Color.fromRGBO(128, 0, 0, 0.5),  // 背景遮罩颜色
          borderColor: Colors.red,  // 边框颜色
          borderRadius: 24,  // 边框圆角半径
          borderStrokeWidth: 2,  // 边框宽度
          buttonColor: Colors.yellow,  // 按钮颜色
          borderFlashDuration: 250,  // 边框闪烁持续时间（毫秒）
          cancelButtonText: "取消",  // 取消按钮文本
          successBeep: false,  // 成功扫描后是否播放提示音
        );

        setState(() {
          _scannedCode = data ?? "";
        });
      },
      child: const Text('OPEN CUSTOMIZED SCANNER'),
    );
  }
}