syncfusion-flutter-barcode-generator
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSyncfusion 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 Type | Character Support | Typical Use Cases |
|---|---|---|
| Codabar | Numeric + special chars (-, :, /, +) | Libraries, blood banks, shipping |
| Code39 | Alphanumeric (uppercase) + symbols | Automotive, defense, healthcare |
| Code39Extended | Full ASCII (all 128 characters) | Extended character encoding |
| Code93 | Alphanumeric + symbols | Compact encoding, logistics |
| Code128 | Full ASCII (automatic mode) | Most versatile, shipping, packaging |
| Code128A | ASCII 0-95 (uppercase + control) | Control character encoding |
| Code128B | ASCII 32-127 (upper + lowercase) | Standard text encoding |
| Code128C | Numeric pairs (00-99) | Numeric data, double density |
| UPCA | 12-digit numeric | Retail products (North America) |
| UPCE | 8-digit numeric (compact) | Small package retail products |
| EAN13 | 13-digit numeric | International retail products |
| EAN8 | 8-digit numeric | Small retail products |
| 条码类型 | 支持字符 | 典型使用场景 |
|---|---|---|
| Codabar | 数字 + 特殊字符(-, :, /, +) | 图书馆、血库、物流运输 |
| Code39 | 字母数字(大写)+ 符号 | 汽车行业、国防、医疗保健 |
| Code39Extended | 全ASCII(全部128个字符) | 扩展字符编码 |
| Code93 | 字母数字 + 符号 | 紧凑型编码、物流 |
| Code128 | 全ASCII(自动模式) | 通用性最强,适用于运输、包装场景 |
| Code128A | ASCII 0-95(大写 + 控制字符) | 控制字符编码 |
| Code128B | ASCII 32-127(大写 + 小写) | 标准文本编码 |
| Code128C | 数字对(00-99) | 数字数据,双倍密度 |
| UPCA | 12位数字 | 零售产品(北美地区) |
| UPCE | 8位数字(紧凑型) | 小包装零售产品 |
| EAN13 | 13位数字 | 全球零售产品 |
| EAN8 | 8位数字 | 小型零售产品 |
Two-Dimensional (2D) Barcodes - 2 Types
二维(2D)条码 - 2种
| Barcode Type | Data Capacity | Typical Use Cases |
|---|---|---|
| QR Code | Up to 7,089 numeric or 4,296 alphanumeric | URLs, contact info, payments, marketing |
| Data Matrix | Up to 3,116 numeric or 2,335 alphanumeric | Electronics, 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核心属性
| Property | Type | Description | Default |
|---|---|---|---|
| value | String | The data to encode in the barcode | Required |
| symbology | Symbology | Barcode type (Code128, QRCode, etc.) | Code128 |
| showValue | bool | Display input value below barcode | false |
| barColor | Color | Color of barcode bars/modules | Colors.black |
| backgroundColor | Color | Background color of barcode | Colors.white |
| textStyle | TextStyle | Style for displayed text | Default TextStyle |
| textSpacing | double | Space between barcode and text | 2 |
| textAlign | TextAlign | Horizontal alignment of text | TextAlign.center |
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| value | String | 要编码到条码中的数据 | 必填 |
| symbology | Symbology | 条码类型(Code128、QRCode等) | Code128 |
| showValue | bool | 是否在条码下方展示输入值 | false |
| barColor | Color | 条码条/模块的颜色 | Colors.black |
| backgroundColor | Color | 条码的背景色 | Colors.white |
| textStyle | TextStyle | 展示文本的样式 | 默认TextStyle |
| textSpacing | double | 条码和文本之间的间距 | 2 |
| textAlign | TextAlign | 文本的水平对齐方式 | TextAlign.center |
Common Symbology Properties
通用编码体系属性
| Property | Applies To | Description | Default |
|---|---|---|---|
| module | All types | Width of smallest bar/dot (logical pixels) | Auto-calculated |
| 属性 | 适用范围 | 描述 | 默认值 |
|---|---|---|---|
| module | 所有类型 | 最小条/点的宽度(逻辑像素) | 自动计算 |
Code39 Specific Properties
Code39专属属性
| Property | Type | Description | Default |
|---|---|---|---|
| enableCheckSum | bool | Add check digit to barcode | true |
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| enableCheckSum | bool | 是否为条码添加校验位 | true |
QR Code Specific Properties
QR Code专属属性
| Property | Type | Description | Default |
|---|---|---|---|
| errorCorrectionLevel | ErrorCorrectionLevel | Error recovery level (low, medium, quartile, high) | high |
| codeVersion | QRCodeVersion | QR version 1-40 or auto | auto |
| inputMode | QRInputMode | Input type (numeric, alphanumeric, binary, kanji) | binary |
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| errorCorrectionLevel | ErrorCorrectionLevel | 错误恢复等级(低、中、四分位、高) | high |
| codeVersion | QRCodeVersion | QR版本1-40或自动 | auto |
| inputMode | QRInputMode | 输入类型(数字、字母数字、二进制、日文汉字) | binary |
Data Matrix Specific Properties
Data Matrix专属属性
| Property | Type | Description | Default |
|---|---|---|---|
| encoding | DataMatrixEncoding | Encoding type (auto, ASCII, ASCIINumeric, base256) | auto |
| dataMatrixSize | DataMatrixSize | Size configuration | auto |
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| encoding | DataMatrixEncoding | 编码类型(自动、ASCII、ASCIINumeric、base256) | auto |
| dataMatrixSize | DataMatrixSize | 尺寸配置 | auto |
Common Use Cases
常见使用场景
- Product Labeling - Generate EAN13 or UPCA barcodes for retail products
- Inventory Management - Use Code128 for tracking assets and stock items
- QR Code Marketing - Create QR codes for URLs, promotions, and campaigns
- Ticket Generation - Generate unique barcodes for event tickets and vouchers
- Document Identification - Add Code39 or Code128 to documents for tracking
- Payment QR Codes - Create QR codes for payment gateways and transactions
- Asset Tracking - Label equipment and assets with Codabar or Code128
- Shipping Labels - Use Code128 for package tracking and logistics
- Library Management - Implement Codabar for book and media tracking
- Healthcare Labels - Generate barcodes for patient records and medications
- Contact Sharing - Create QR codes with vCard data for business cards
- Wi-Fi Sharing - Generate QR codes for Wi-Fi credentials
- 产品标签 - 为零售产品生成EAN13或UPCA条码
- 库存管理 - 使用Code128追踪资产和库存物品
- QR码营销 - 为URL、促销活动生成QR码
- 票务生成 - 为活动门票和优惠券生成唯一条码
- 文档标识 - 为文档添加Code39或Code128以便追踪
- 支付QR码 - 为支付网关和交易生成QR码
- 资产追踪 - 使用Codabar或Code128为设备和资产打标签
- 运输标签 - 使用Code128进行包裹追踪和物流管理
- 图书馆管理 - 用Codabar实现图书和媒体追踪
- 医疗标签 - 为患者记录和药品生成条码
- 联系人分享 - 生成带vCard数据的QR码用于名片
- Wi-Fi分享 - 生成带Wi-Fi凭证的QR码
Related Resources
相关资源
- Package: syncfusion_flutter_barcodes
- API Documentation: SfBarcodeGenerator API
- GitHub Examples: Flutter Barcode Examples
- Video Tutorial: Getting Started with Flutter Barcode Generator
- Official Documentation: Syncfusion Flutter Barcode User Guide