syncfusion-flutter-barcode-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Syncfusion Flutter Barcode Generator

Syncfusion Flutter 条码生成器

This skill covers the Syncfusion Flutter Barcode Generator component (SfBarcodeGenerator) for creating machine-readable barcodes. The widget supports 14 different barcode symbologies including popular 1D barcodes (Code128, EAN, UPC, etc.) and 2D barcodes (QR Code, Data Matrix).
本技能介绍用于生成机器可读条码的Syncfusion Flutter条码生成组件(SfBarcodeGenerator)。该组件支持14种不同的条码编码体系,包括常用的一维条码(Code128、EAN、UPC等)和二维条码(QR Code、Data Matrix)。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Generate barcodes for products, assets, or documents
  • Implement QR codes for URLs, contact info, or payments
  • Create product labels with retail barcodes (EAN, UPC)
  • Build inventory systems with barcode tracking
  • Generate Data Matrix codes for compact data encoding
  • Add barcode scanning integration to your Flutter apps
  • Create tickets or vouchers with unique barcode identifiers
  • Implement asset tracking with barcode labels
  • Generate barcodes for documents or identification cards
  • Customize barcode appearance with colors, text, and styling
  • Support multiple barcode formats in a single application
  • Display machine-readable codes for data input workflows
当你需要完成以下需求时可使用本技能:
  • 为产品、资产或文档生成条码
  • 为URL、联系信息或支付场景实现QR码功能
  • 生成带有零售条码(EAN、UPC)的产品标签
  • 搭建带条码追踪能力的库存管理系统
  • 生成用于紧凑型数据编码的Data Matrix码
  • 为你的Flutter应用集成条码扫描功能
  • 生成带唯一条码标识的门票或优惠券
  • 通过条码标签实现资产追踪
  • 为文档或身份证生成条码
  • 通过颜色、文本和样式自定义条码外观
  • 在单个应用中支持多种条码格式
  • 为数据录入工作流展示机器可读码

Component Overview

组件概述

SfBarcodeGenerator is a data visualization widget designed to generate and display data in a machine-readable format. It provides:
  • 14 Barcode Symbologies - 12 one-dimensional and 2 two-dimensional types
  • Customizable Appearance - Colors, text styling, spacing, and bar width control
  • Easy Integration - Simple API with minimal configuration
  • Accessibility Support - Sufficient contrast and large fonts support
  • Flexible Sizing - Automatic or manual module (bar width) configuration
  • Text Display - Show/hide input values with custom formatting
SfBarcodeGenerator是一款数据可视化组件,用于生成并展示机器可读格式的数据,它提供以下特性:
  • 14种条码编码体系 - 包含12种一维条码和2种二维条码类型
  • 可自定义外观 - 支持颜色、文本样式、间距和条码宽度控制
  • 易于集成 - API简单,仅需最少配置即可使用
  • 无障碍支持 - 支持充足对比度和大字体
  • 灵活的尺寸设置 - 支持自动或手动配置模块(条码宽度)
  • 文本显示能力 - 可自定义格式显示/隐藏输入值

Supported Barcode Types

支持的条码类型

One-Dimensional (1D) Barcodes - 12 Types

一维(1D)条码 - 12种

Barcode TypeCharacter SupportTypical Use Cases
CodabarNumeric + special chars (-, :, /, +)Libraries, blood banks, shipping
Code39Alphanumeric (uppercase) + symbolsAutomotive, defense, healthcare
Code39ExtendedFull ASCII (all 128 characters)Extended character encoding
Code93Alphanumeric + symbolsCompact encoding, logistics
Code128Full ASCII (automatic mode)Most versatile, shipping, packaging
Code128AASCII 0-95 (uppercase + control)Control character encoding
Code128BASCII 32-127 (upper + lowercase)Standard text encoding
Code128CNumeric pairs (00-99)Numeric data, double density
UPCA12-digit numericRetail products (North America)
UPCE8-digit numeric (compact)Small package retail products
EAN1313-digit numericInternational retail products
EAN88-digit numericSmall retail products
条码类型支持字符典型使用场景
Codabar数字 + 特殊字符(-, :, /, +)图书馆、血库、物流运输
Code39字母数字(大写)+ 符号汽车行业、国防、医疗保健
Code39Extended全ASCII(全部128个字符)扩展字符编码
Code93字母数字 + 符号紧凑型编码、物流
Code128全ASCII(自动模式)通用性最强,适用于运输、包装场景
Code128AASCII 0-95(大写 + 控制字符)控制字符编码
Code128BASCII 32-127(大写 + 小写)标准文本编码
Code128C数字对(00-99)数字数据,双倍密度
UPCA12位数字零售产品(北美地区)
UPCE8位数字(紧凑型)小包装零售产品
EAN1313位数字全球零售产品
EAN88位数字小型零售产品

Two-Dimensional (2D) Barcodes - 2 Types

二维(2D)条码 - 2种

Barcode TypeData CapacityTypical Use Cases
QR CodeUp to 7,089 numeric or 4,296 alphanumericURLs, contact info, payments, marketing
Data MatrixUp to 3,116 numeric or 2,335 alphanumericElectronics, pharmaceuticals, printed media
QR Code Features:
  • Error correction levels (Low, Medium, Quartile, High)
  • Input modes (Numeric, Alphanumeric, Binary, Kanji)
  • Version 1-40 (21x21 to 177x177 modules)
Data Matrix Features:
  • Encoding types (Auto, ASCII, ASCIINumeric, Base256)
  • Square and rectangular formats
  • Compact size for small labels
条码类型数据容量典型使用场景
QR Code最多支持7089个数字字符或4296个字母数字字符URL、联系信息、支付、营销
Data Matrix最多支持3116个数字字符或2335个字母数字字符电子行业、制药、印刷媒体
QR Code特性:
  • 纠错等级(低、中、四分位、高)
  • 输入模式(数字、字母数字、二进制、日文汉字)
  • 版本1-40(21x21到177x177模块)
Data Matrix特性:
  • 编码类型(自动、ASCII、ASCIINumeric、Base256)
  • 正方形和矩形格式
  • 尺寸紧凑,适合小标签

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Installation and package setup
  • Add dependency to pubspec.yaml
  • Import barcode package
  • Basic SfBarcodeGenerator implementation
  • Create your first 1D barcode (Code128)
  • Create your first QR code
  • Display input value below barcode
  • Next steps and learning path
📄 阅读: references/getting-started.md
  • 安装与包设置
  • 向pubspec.yaml添加依赖
  • 导入条码包
  • SfBarcodeGenerator基础实现
  • 创建你的第一个一维条码(Code128)
  • 创建你的第一个QR码
  • 在条码下方展示输入值
  • 后续步骤与学习路径

Barcode Types and Symbologies

条码类型与编码体系

📄 Read: references/barcode-types.md
  • All 12 one-dimensional barcode types with examples
  • All 2 two-dimensional barcode types with examples
  • Detailed properties for each symbology
  • Input validation rules per barcode type
  • Character support and limitations
  • Choosing the right barcode type for your use case
  • Symbology comparison table
  • Best practices for barcode selection
📄 阅读: references/barcode-types.md
  • 全部12种一维条码类型及示例
  • 全部2种二维条码类型及示例
  • 每种编码体系的详细属性
  • 各条码类型的输入校验规则
  • 支持字符及限制
  • 为你的使用场景选择合适的条码类型
  • 编码体系对比表
  • 条码选择最佳实践

Customization and Styling

自定义与样式设置

📄 Read: references/customization.md
  • Text customization (showValue, textStyle, textSpacing, textAlign)
  • Bar customization (module, barColor, backgroundColor)
  • Size and layout control
  • Responsive sizing strategies
  • Text style properties (font, size, weight, color)
  • Bar width (module) configuration for 1D and 2D barcodes
  • Complete customization examples
  • Best practices for scannable barcodes
📄 阅读: references/customization.md
  • 文本自定义(showValue、textStyle、textSpacing、textAlign)
  • 条码自定义(module、barColor、backgroundColor)
  • 尺寸与布局控制
  • 响应式尺寸策略
  • 文本样式属性(字体、大小、字重、颜色)
  • 一维和二维条码的宽度(模块)配置
  • 完整自定义示例
  • 可扫描条码的最佳实践

Accessibility Features

无障碍功能

📄 Read: references/accessibility.md
  • Sufficient contrast support
  • Large fonts and text scaling
  • Color customization for accessibility
  • MediaQueryData integration
  • Accessibility best practices
  • Testing for readability
📄 阅读: references/accessibility.md
  • 充足对比度支持
  • 大字体与文本缩放
  • 面向无障碍的颜色自定义
  • MediaQueryData集成
  • 无障碍最佳实践
  • 可读性测试

Quick Start Examples

快速入门示例

Basic QR Code

基础QR码

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

class QRCodeExample extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('QR Code')),
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          child: SfBarcodeGenerator(
            value: 'https://www.syncfusion.com',
            symbology: QRCode(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class QRCodeExample extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('QR Code')),
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          child: SfBarcodeGenerator(
            value: 'https://www.syncfusion.com',
            symbology: QRCode(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}

Basic Code128 Barcode

基础Code128条码

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

class Code128Example extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Code128 Barcode')),
      body: Center(
        child: Container(
          height: 150,
          child: SfBarcodeGenerator(
            value: 'SYNCFUSION',
            symbology: Code128(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class Code128Example extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Code128 Barcode')),
      body: Center(
        child: Container(
          height: 150,
          child: SfBarcodeGenerator(
            value: 'SYNCFUSION',
            symbology: Code128(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}

Retail Product Barcode (EAN13)

零售产品条码(EAN13)

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

class RetailBarcodeExample extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Product Barcode')),
      body: Center(
        child: Container(
          height: 150,
          width: 280,
          child: SfBarcodeGenerator(
            value: '9735940564824',
            symbology: EAN13(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class RetailBarcodeExample extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Product Barcode')),
      body: Center(
        child: Container(
          height: 150,
          width: 280,
          child: SfBarcodeGenerator(
            value: '9735940564824',
            symbology: EAN13(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}

Common Patterns

常见使用模式

Pattern 1: QR Code with Error Correction

模式1:带纠错功能的QR码

dart
SfBarcodeGenerator(
  value: 'https://www.example.com/product/12345',
  symbology: QRCode(
    errorCorrectionLevel: ErrorCorrectionLevel.high,
    codeVersion: QRCodeVersion.auto,
    inputMode: QRInputMode.binary,
  ),
  showValue: true,
  textSpacing: 10,
)
dart
SfBarcodeGenerator(
  value: 'https://www.example.com/product/12345',
  symbology: QRCode(
    errorCorrectionLevel: ErrorCorrectionLevel.high,
    codeVersion: QRCodeVersion.auto,
    inputMode: QRInputMode.binary,
  ),
  showValue: true,
  textSpacing: 10,
)

Pattern 2: Customized Barcode Appearance

模式2:自定义条码外观

dart
SfBarcodeGenerator(
  value: 'PRODUCT-12345',
  symbology: Code128(module: 2),
  barColor: Colors.deepPurple,
  backgroundColor: Colors.grey[100],
  textStyle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
    color: Colors.deepPurple,
  ),
  showValue: true,
  textAlign: TextAlign.center,
  textSpacing: 15,
)
dart
SfBarcodeGenerator(
  value: 'PRODUCT-12345',
  symbology: Code128(module: 2),
  barColor: Colors.deepPurple,
  backgroundColor: Colors.grey[100],
  textStyle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
    color: Colors.deepPurple,
  ),
  showValue: true,
  textAlign: TextAlign.center,
  textSpacing: 15,
)

Pattern 3: Multiple Barcode Types in List

模式3:列表中展示多种条码类型

dart
class BarcodeList extends StatelessWidget {
  final List<BarcodeItem> barcodeTypes = [
    BarcodeItem('Code128', '12345678', Code128()),
    BarcodeItem('QR Code', 'https://example.com', QRCode()),
    BarcodeItem('EAN13', '9735940564824', EAN13()),
    BarcodeItem('Code39', 'CODE39', Code39()),
  ];

  
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: barcodeTypes.length,
      itemBuilder: (context, index) {
        final item = barcodeTypes[index];
        return Card(
          margin: EdgeInsets.all(8),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Text(
                  item.name,
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 10),
                Container(
                  height: 150,
                  child: SfBarcodeGenerator(
                    value: item.value,
                    symbology: item.symbology,
                    showValue: true,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class BarcodeItem {
  final String name;
  final String value;
  final Symbology symbology;
  
  BarcodeItem(this.name, this.value, this.symbology);
}
dart
class BarcodeList extends StatelessWidget {
  final List<BarcodeItem> barcodeTypes = [
    BarcodeItem('Code128', '12345678', Code128()),
    BarcodeItem('QR Code', 'https://example.com', QRCode()),
    BarcodeItem('EAN13', '9735940564824', EAN13()),
    BarcodeItem('Code39', 'CODE39', Code39()),
  ];

  
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: barcodeTypes.length,
      itemBuilder: (context, index) {
        final item = barcodeTypes[index];
        return Card(
          margin: EdgeInsets.all(8),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Text(
                  item.name,
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 10),
                Container(
                  height: 150,
                  child: SfBarcodeGenerator(
                    value: item.value,
                    symbology: item.symbology,
                    showValue: true,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class BarcodeItem {
  final String name;
  final String value;
  final Symbology symbology;
  
  BarcodeItem(this.name, this.value, this.symbology);
}

Pattern 4: Responsive Barcode Sizing

模式4:响应式条码尺寸

dart
class ResponsiveBarcode extends StatelessWidget {
  
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final barcodeSize = screenWidth * 0.8;

    return Center(
      child: Container(
        height: barcodeSize,
        width: barcodeSize,
        child: SfBarcodeGenerator(
          value: 'RESPONSIVE-BARCODE',
          symbology: QRCode(),
          showValue: true,
        ),
      ),
    );
  }
}
dart
class ResponsiveBarcode extends StatelessWidget {
  
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final barcodeSize = screenWidth * 0.8;

    return Center(
      child: Container(
        height: barcodeSize,
        width: barcodeSize,
        child: SfBarcodeGenerator(
          value: 'RESPONSIVE-BARCODE',
          symbology: QRCode(),
          showValue: true,
        ),
      ),
    );
  }
}

Key Properties

核心属性

SfBarcodeGenerator Essential Properties

SfBarcodeGenerator核心属性

PropertyTypeDescriptionDefault
valueStringThe data to encode in the barcodeRequired
symbologySymbologyBarcode type (Code128, QRCode, etc.)Code128
showValueboolDisplay input value below barcodefalse
barColorColorColor of barcode bars/modulesColors.black
backgroundColorColorBackground color of barcodeColors.white
textStyleTextStyleStyle for displayed textDefault TextStyle
textSpacingdoubleSpace between barcode and text2
textAlignTextAlignHorizontal alignment of textTextAlign.center
属性类型描述默认值
valueString要编码到条码中的数据必填
symbologySymbology条码类型(Code128、QRCode等)Code128
showValuebool是否在条码下方展示输入值false
barColorColor条码条/模块的颜色Colors.black
backgroundColorColor条码的背景色Colors.white
textStyleTextStyle展示文本的样式默认TextStyle
textSpacingdouble条码和文本之间的间距2
textAlignTextAlign文本的水平对齐方式TextAlign.center

Common Symbology Properties

通用编码体系属性

PropertyApplies ToDescriptionDefault
moduleAll typesWidth of smallest bar/dot (logical pixels)Auto-calculated
属性适用范围描述默认值
module所有类型最小条/点的宽度(逻辑像素)自动计算

Code39 Specific Properties

Code39专属属性

PropertyTypeDescriptionDefault
enableCheckSumboolAdd check digit to barcodetrue
属性类型描述默认值
enableCheckSumbool是否为条码添加校验位true

QR Code Specific Properties

QR Code专属属性

PropertyTypeDescriptionDefault
errorCorrectionLevelErrorCorrectionLevelError recovery level (low, medium, quartile, high)high
codeVersionQRCodeVersionQR version 1-40 or autoauto
inputModeQRInputModeInput type (numeric, alphanumeric, binary, kanji)binary
属性类型描述默认值
errorCorrectionLevelErrorCorrectionLevel错误恢复等级(低、中、四分位、高)high
codeVersionQRCodeVersionQR版本1-40或自动auto
inputModeQRInputMode输入类型(数字、字母数字、二进制、日文汉字)binary

Data Matrix Specific Properties

Data Matrix专属属性

PropertyTypeDescriptionDefault
encodingDataMatrixEncodingEncoding type (auto, ASCII, ASCIINumeric, base256)auto
dataMatrixSizeDataMatrixSizeSize configurationauto
属性类型描述默认值
encodingDataMatrixEncoding编码类型(自动、ASCII、ASCIINumeric、base256)auto
dataMatrixSizeDataMatrixSize尺寸配置auto

Common Use Cases

常见使用场景

  1. Product Labeling - Generate EAN13 or UPCA barcodes for retail products
  2. Inventory Management - Use Code128 for tracking assets and stock items
  3. QR Code Marketing - Create QR codes for URLs, promotions, and campaigns
  4. Ticket Generation - Generate unique barcodes for event tickets and vouchers
  5. Document Identification - Add Code39 or Code128 to documents for tracking
  6. Payment QR Codes - Create QR codes for payment gateways and transactions
  7. Asset Tracking - Label equipment and assets with Codabar or Code128
  8. Shipping Labels - Use Code128 for package tracking and logistics
  9. Library Management - Implement Codabar for book and media tracking
  10. Healthcare Labels - Generate barcodes for patient records and medications
  11. Contact Sharing - Create QR codes with vCard data for business cards
  12. Wi-Fi Sharing - Generate QR codes for Wi-Fi credentials
  1. 产品标签 - 为零售产品生成EAN13或UPCA条码
  2. 库存管理 - 使用Code128追踪资产和库存物品
  3. QR码营销 - 为URL、促销活动生成QR码
  4. 票务生成 - 为活动门票和优惠券生成唯一条码
  5. 文档标识 - 为文档添加Code39或Code128以便追踪
  6. 支付QR码 - 为支付网关和交易生成QR码
  7. 资产追踪 - 使用Codabar或Code128为设备和资产打标签
  8. 运输标签 - 使用Code128进行包裹追踪和物流管理
  9. 图书馆管理 - 用Codabar实现图书和媒体追踪
  10. 医疗标签 - 为患者记录和药品生成条码
  11. 联系人分享 - 生成带vCard数据的QR码用于名片
  12. Wi-Fi分享 - 生成带Wi-Fi凭证的QR码

Related Resources

相关资源