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

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

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

Flutter Barcode Generator package 是一个数据可视化组件，用于以机器可读格式生成和显示数据。它提供了完美的方法来使用支持的符号学类型编码输入值。

免责声明： 这是一个商业包。要使用此包，您需要拥有 Syncfusion® 商业许可证或 免费 Syncfusion® 社区许可证。更多详情，请查看 LICENSE 文件。

目录

Barcode Generator 特性

  • 一维条形码 - 支持不同的1D条形码符号学，如Code128, EAN8, EAN13等。 One-dimensional barcodes

  • 二维条形码 - 支持流行的QR码和Data Matrix。 Two-dimensional barcode

  • 条形码自定义 - 使用backgroundColor和barColor属性自定义条形码的视觉外观，并通过module属性调整代码最小线或点的大小。

  • 文本自定义 - 配置以显示条形码值并自定义条形码文本的位置和样式。

获取演示应用程序

探索我们Flutter小部件在您的设备上的全部功能，通过以下应用商店安装我们的示例浏览器应用程序，并在GitHub上查看样本代码。

其他有用链接

安装

从 pub 安装最新版本。

开始使用

将 Barcode Generator 添加到小部件树

将 Barcode Generator 小部件作为任何小部件的子项添加。这里，将小部件添加为容器小部件的子项，并指定容器的高度（否则它将占用整个容器高度）

import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200,
            child: SfBarcodeGenerator(value: 'www.syncfusion.com'),
          ),
        ),
      ),
    );
  }
}

添加条形码符号学

设置所需的符号学类型到条形码生成器中，根据输入值初始化symbology属性。下面的代码片段中，将QR码设置为条形码符号学。

import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200,
            child: SfBarcodeGenerator(
              value: 'www.syncfusion.com',
              symbology: QRCode(),
            ),
          ),
        ),
      ),
    );
  }
}

显示条形码的值

通过启用showValue属性可以显示输入值。

import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Barcode Generator Demo'),
        ),
        body: Center(
          child: Container(
            height: 200,
            child: SfBarcodeGenerator(
              value: 'www.syncfusion.com',
              symbology: QRCode(),
              showValue: true,
            ),
          ),
        ),
      ),
    );
  }
}

simple radial gauge

支持和反馈

关于 Syncfusion®

Syncfusion® 成立于2001年，总部位于北卡罗来纳研究三角园区，拥有超过20,000名客户和100多万用户，包括大型金融机构、财富500强公司和全球IT咨询公司。

今天，我们提供1,000多个控件和框架，适用于Web、移动和桌面开发平台。我们还提供即用型企业软件，用于仪表板、报表、数据集成和大数据处理。许多客户通过部署我们的软件节省了数百万的许可费用。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用syncfusion_flutter_barcodes插件来生成和扫描条形码的示例代码。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_barcodes: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

2. 生成条形码

以下是一个生成条形码的示例代码：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Barcode Generator'),
        ),
        body: Center(
          child: SfBarcodeGenerator(
            value: '123456789012', // 条形码数据
            barcodeFormat: BarcodeFormat.code128, // 条形码格式
            width: 250,
            height: 100,
          ),
        ),
      ),
    );
  }
}

3. 扫描条形码

为了扫描条形码，你需要使用syncfusion_flutter_barcodes/barcode_scanner。以下是一个扫描条形码的示例代码：

首先，确保你的Info.plist（iOS）和AndroidManifest.xml（Android）文件中添加了必要的权限和配置。

iOS: Info.plist

<key>NSCameraUsageDescription</key>
<string>Camera access is required to scan barcodes.</string>

Android: AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

然后，创建扫描页面：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/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'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final BarcodeScannerResult result = await SfBarcodeScanner.scan();
              if (result != null && result.rawBytes != null) {
                final String scannedValue = String.fromCharCodes(result.rawBytes!);
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('Scanned Barcode'),
                    content: Text(scannedValue),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(),
                        child: Text('OK'),
                      ),
                    ],
                  ),
                );
              }
            },
            child: Text('Scan Barcode'),
          ),
        ),
      ),
    );
  }
}

总结

上述代码展示了如何使用syncfusion_flutter_barcodes插件在Flutter应用中生成和扫描条形码。请确保你替换了依赖项的版本号为最新的可用版本，并根据需要调整UI布局和功能。

回到顶部