Syncfusion Flutter Barcode Generator

Syncfusion Flutter Barcode Generator

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).

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

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

Supported Barcode Types

One-Dimensional (1D) Barcodes - 12 Types

Two-Dimensional (2D) Barcodes - 2 Types

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

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

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

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

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

Quick Start Examples

Basic QR Code

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

class QRCodeExample extends StatelessWidget {
  @override
  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

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

class Code128Example extends StatelessWidget {
  @override
  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)

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

class RetailBarcodeExample extends StatelessWidget {
  @override
  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

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

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

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()),
  ];

  @override
  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

class ResponsiveBarcode extends StatelessWidget {
  @override
  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

Common Symbology Properties

Code39 Specific Properties

QR Code Specific Properties

Data Matrix Specific Properties

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

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