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

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

dart_barcode

dart_barcode 是 JsBarcode 库的互操作插件。JsBarcode 是一种简单的方式来创建不同类型的 1D 条形码。该插件使用 HTML5 Canvas/Img/SVG 来生成并绘制条形码。


使用方法

index.html

index.html 文件中引入 JsBarcode 的库文件,并添加一个用于渲染条形码的目标元素(如 <svg><img>):

<script async src="packages/dart_barcode/vendors/js/JsBarcode.all.min.js"></script>

<svg id="code"></svg>

main.dart

main.dart 文件中使用 DartBarcode 类来生成条形码:

import 'package:dart_barcode/dart_barcode.dart';

void main() {
  // 使用默认选项生成条形码
  DartBarcode("#code").ean13("1234567890128").render();

  // 自定义选项生成条形码
  DartBarcode("#code128", "Hello DartBarcode").code128().render();
}

完整示例代码

以下是一个完整的示例代码,展示如何使用 dart_barcode 插件生成多种类型的条形码:

// Copyright (c) 2015, <your name>. All rights reserved. Use of this source code
// is governed by a BSD-style license that can be found in the LICENSE file.

library dart_barcode.example;

import 'dart:html';
import 'package:dart_barcode/dart_barcode.dart';

void main() {
  // 使用默认选项生成条形码
  DartBarcode("#code128").code128("1234567890").render();
  DartBarcode("#ean-13").ean13("1234567890128").render();
  DartBarcode("#ean-8").ean8("12345670").render();
  DartBarcode("#ean-5").ean5("12345").render();
  DartBarcode("#ean-2").ean2("12").render();
  DartBarcode("#upc-a").upc("123456789012").render();
  DartBarcode("#code39").code39("Hello").render();
  DartBarcode("#itf-14").itf14("1234567890123").render();
  DartBarcode("#msi").msi("123456").render();
  DartBarcode("#pharmacode").pharmacode("12345").render();

  // 使用自定义选项生成条形码
  DartBarcode(".barcode")
      .options(Options(font: 'OCR-B')) // 全局设置字体为 OCR-B
      .ean13("1234567890128", Options(fontSize: 18, textMargin: 0))
      .blank(20) // 创建条形码之间的间距
      .ean5(
        "12345",
        Options(height: 85, textPosition: 'top', fontSize: 16, marginTop: 15),
      )
      .render();
}

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

1 回复

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


在Flutter中,生成和扫描条形码是一个常见的需求。dart_barcode 是一个用于生成条形码的库,而 flutter_barcode_scanner 是一个用于扫描条形码的插件。下面我将介绍如何使用这两个库来实现条形码的生成和扫描。

1. 安装依赖

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

dependencies:
  flutter:
    sdk: flutter
  dart_barcode: ^1.0.0
  flutter_barcode_scanner: ^2.0.0

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

2. 生成条形码

使用 dart_barcode 库来生成条形码非常简单。以下是一个生成条形码的示例:

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

class BarcodeGeneratorPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建条形码实例
    final barcode = Barcode.code128();

    // 生成条形码图像
    final image = barcode.toImage('123456789', width: 300, height: 150);

    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Generator'),
      ),
      body: Center(
        child: Image.memory(image), // 显示生成的条形码
      ),
    );
  }
}

3. 扫描条形码

使用 flutter_barcode_scanner 插件来扫描条形码。以下是一个扫描条形码的示例:

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

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

class _BarcodeScannerPageState extends State<BarcodeScannerPage> {
  String _scanResult = 'Scan a barcode';

  Future<void> scanBarcode() async {
    String barcodeScanResult;
    try {
      barcodeScanResult = await FlutterBarcodeScanner.scanBarcode(
          '#ff6666', 'Cancel', true, ScanMode.BARCODE);
    } catch (e) {
      barcodeScanResult = 'Failed to get platform version.';
    }

    // 如果用户没有取消扫描,则更新扫描结果
    if (!mounted) return;

    setState(() {
      _scanResult = barcodeScanResult;
    });
  }

  [@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(
              'Scan result: $_scanResult',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: scanBarcode,
              child: Text('Scan Barcode'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

你可以将上述代码整合到一个 Flutter 应用中,并在不同的页面中分别实现条形码的生成和扫描功能。

import 'package:flutter/material.dart';
import 'barcode_generator_page.dart';
import 'barcode_scanner_page.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Barcode Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Barcode Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => BarcodeGeneratorPage()),
                );
              },
              child: Text('Generate Barcode'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => BarcodeScannerPage()),
                );
              },
              child: Text('Scan Barcode'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部