Flutter条形码扫描与生成插件r_barcode的使用

r_barcode 是一个用于在 Flutter 应用中实现条形码扫描和生成功能的插件。它支持多种条形码格式,并提供了丰富的自定义选项。


使用步骤

1. 添加依赖

pubspec.yaml 文件中添加 r_barcode 作为依赖:

dependencies:
  r_barcode: ^版本号

然后运行以下命令以安装依赖:

flutter pub get

2. 初始化插件

在应用启动时初始化条形码引擎,并获取可用的摄像头列表。

import 'package:r_barcode/r_barcode.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BarcodeScannerPage(),
    );
  }
}

在页面中初始化插件:

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

class _BarcodeScannerPageState extends State<BarcodeScannerPage> {
  RBarcodeCameraController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    RBarcode.initBarcodeEngine(isDebug: true, isReturnImage: true)
        .then((_) {
      RBarcode.availableBarcodeCameras().then((cameras) {
        if (cameras.isNotEmpty) {
          _controller = RBarcodeCameraController(
            cameras.first,
            RBarcodeCameraResolutionPreset.max,
            formats: [RBarcodeFormat.QRCode],
            isDebug: true,
          )..initialize().then((_) {
              _controller.addListener(_handleResultListener);
            });
        }
      });
    });
  }

  void _handleResultListener() {
    if (_controller.result != null) {
      print('扫描结果: ${_controller.result.text}');
    }
  }

  [@override](/user/override)
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('条形码扫描')),
      body: _controller != null && _controller.value.isInitialized
          ? RBarcodeCamera(_controller)
          : Center(child: CircularProgressIndicator()),
    );
  }
}

3. 扫描条形码

通过调用 _controller.startScan()_controller.stopScan() 来控制扫描状态。监听扫描结果并处理。

void _handleScanStart() {
  _controller.startScan();
  print('开始扫描');
}

void _handleScanStop() {
  _controller.stopScan();
  print('停止扫描');
}

4. 生成条形码

使用 RBarcode.generate() 方法生成条形码图像。

import 'package:r_barcode/r_barcode.dart';

Future<void> generateBarcode() async {
  final barcode = await RBarcode.generate(
    text: 'Hello, r_barcode!',
    format: RBarcodeFormat.QRCode,
    resolution: Size(200, 200),
  );
  if (barcode != null) {
    // 将生成的条形码保存到文件或显示在界面上
    print('条形码生成成功');
  } else {
    print('条形码生成失败');
  }
}

5. 自定义 UI

可以使用 MaterialBarCodeFrameWidget 包裹扫描区域,并添加工具栏、闪光灯按钮等。

Widget _buildCamera() {
  return Center(
    child: MaterialBarCodeFrameWidget(
      scanStatus: _scanStatus,
      scanType: _scanType,
      child: AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: RBarcodeCamera(_controller),
      ),
    ),
  );
}

Widget _buildToolBar() {
  return Positioned(
    left: 0,
    right: 0,
    bottom: 130,
    child: Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.black45,
          borderRadius: BorderRadius.circular(8),
        ),
        padding: EdgeInsets.all(4),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            _buildToolBarButton('二维码', _scanType == BarcodeScanType.qrCode, () => _handleScanTypeChange(BarcodeScanType.qrCode)),
            Container(width: 1, height: 16, color: Colors.black),
            _buildToolBarButton('条形码', _scanType == BarcodeScanType.barCode, () => _handleScanTypeChange(BarcodeScanType.barCode)),
          ],
        ),
      ),
    ),
  );
}

6. 完整示例代码

以下是一个完整的示例代码,展示了如何集成条形码扫描和生成功能。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:r_barcode/r_barcode.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BarcodeScannerPage(),
    );
  }
}

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

class _BarcodeScannerPageState extends State<BarcodeScannerPage> {
  RBarcodeCameraController _controller;
  BarcodeScanStatus _scanStatus = BarcodeScanStatus.scan;
  BarcodeScanType _scanType = BarcodeScanType.qrCode;

  [@override](/user/override)
  void initState() {
    super.initState();
    RBarcode.initBarcodeEngine(isDebug: true, isReturnImage: true)
        .then((_) {
      RBarcode.availableBarcodeCameras().then((cameras) {
        if (cameras.isNotEmpty) {
          _controller = RBarcodeCameraController(
            cameras.first,
            RBarcodeCameraResolutionPreset.max,
            formats: [RBarcodeFormat.QRCode],
            isDebug: true,
          )..initialize().then((_) {
              _controller.addListener(_handleResultListener);
            });
        }
      });
    });
  }

  void _handleResultListener() {
    if (_controller.result != null) {
      print('扫描结果: ${_controller.result.text}');
    }
  }

  [@override](/user/override)
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('条形码扫描')),
      body: _controller != null && _controller.value.isInitialized
          ? Stack(
              children: [
                _buildCamera(),
                _buildToolBar(),
                if (_controller.result?.text != null) buildText(),
              ],
            )
          : Center(child: CircularProgressIndicator()),
    );
  }

  Widget _buildCamera() {
    return Center(
      child: MaterialBarCodeFrameWidget(
        scanStatus: _scanStatus,
        scanType: _scanType,
        child: AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: RBarcodeCamera(_controller),
        ),
      ),
    );
  }

  Widget _buildToolBar() {
    return Positioned(
      left: 0,
      right: 0,
      bottom: 130,
      child: Center(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.black45,
            borderRadius: BorderRadius.circular(8),
          ),
          padding: EdgeInsets.all(4),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildToolBarButton('二维码', _scanType == BarcodeScanType.qrCode, () => _handleScanTypeChange(BarcodeScanType.qrCode)),
              Container(width: 1, height: 16, color: Colors.black),
              _buildToolBarButton('条形码', _scanType == BarcodeScanType.barCode, () => _handleScanTypeChange(BarcodeScanType.barCode)),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildToolBarButton(String title, bool isSelect, VoidCallback onTap) {
    return InkWell(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.all(8),
        child: Text(
          title,
          style: TextStyle(
            color: isSelect ? Colors.blue : Colors.white,
          ),
        ),
      ),
    );
  }

  Widget buildText() {
    return Positioned(
      left: 0,
      right: 0,
      top: 20,
      child: Container(
        padding: EdgeInsets.all(8),
        color: Colors.black45,
        child: Text(
          _controller.result.text,
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

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

1 回复

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


r_barcode 是一个用于 Flutter 的插件,支持条形码的扫描和生成。它提供了简单易用的 API,可以帮助开发者在 Flutter 应用中快速集成条形码功能。以下是使用 r_barcode 插件进行条形码扫描和生成的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  r_barcode: ^1.0.0  # 请使用最新版本

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

2. 条形码扫描

r_barcode 提供了 RBarcodeScanner 类来进行条形码扫描。以下是一个简单的示例:

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

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

class _BarcodeScanPageState extends State<BarcodeScanPage> {
  String _scanResult = 'Scan a barcode';

  Future<void> _scanBarcode() async {
    try {
      final result = await RBarcodeScanner.scan();
      setState(() {
        _scanResult = result;
      });
    } 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'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 条形码生成

r_barcode 还支持生成条形码。以下是一个生成条形码的示例:

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

class BarcodeGeneratePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Generator'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RBarcode(
              data: '123456789012',
              type: RBarcodeType.Code128,
              width: 200,
              height: 100,
            ),
            SizedBox(height: 20),
            Text('Generated Barcode'),
          ],
        ),
      ),
    );
  }
}
回到顶部