syncfusion-flutter-barcode-generator

Syncfusion Flutter バーコードジェネレーター

このスキルでは、機械可読バーコードを作成するための Syncfusion Flutter バーコードジェネレーターコンポーネント（SfBarcodeGenerator）を扱います。このウィジェットは、一般的な 1D バーコード（Code128、EAN、UPC など）や 2D バーコード（QR Code、Data Matrix）を含む、14 種類のバーコードシンボルに対応しています。

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• 製品、資産、文書のバーコードを生成する
• URL、連絡先情報、支払い用の QR コードを実装する
• 小売用バーコード（EAN、UPC）を使った製品ラベルを作成する
• バーコード追跡機能を備えた在庫管理システムを構築する
• コンパクトなデータエンコード用の Data Matrix コードを生成する
• Flutter アプリにバーコードスキャン機能を統合する
• 一意のバーコード識別子を使ってチケットやクーポンを作成する
• バーコードラベルを使った資産追跡を実装する
• 文書や身分証明カード用のバーコードを生成する
• 色、テキスト、スタイルを使ってバーコードの外観をカスタマイズする
• 1 つのアプリケーションで複数のバーコード形式に対応する
• データ入力ワークフロー用の機械可読コードを表示する

コンポーネントの概要

SfBarcodeGenerator は、機械可読形式でデータを生成して表示するために設計されたデータ可視化ウィジェットです。次の機能を備えています。

• 14 種類のバーコードシンボル - 12 種類の一次元タイプと 2 種類の二次元タイプ
• 外観のカスタマイズ - 色、テキストスタイル、間隔、バー幅を調整できます
• 簡単な統合 - 最小限の設定で使えるシンプルな API
• アクセシビリティへの対応 - 十分なコントラストと大きなフォントをサポートします
• 柔軟なサイズ設定 - モジュール（バー幅）を自動または手動で設定できます
• テキスト表示 - カスタム形式で入力値の表示／非表示を切り替えられます

対応するバーコードの種類

一次元（1D）バーコード - 12 種類

バーコードの種類	文字の対応範囲	主な用途
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 桁の数字	小型の小売製品

二次元（2D）バーコード - 2 種類

バーコードの種類	データ容量	主な用途
QR Code	数字で最大 7,089 文字、英数字で最大 4,296 文字	URL、連絡先情報、支払い、マーケティング
Data Matrix	数字で最大 3,116 文字、英数字で最大 2,335 文字	電子機器、医薬品、印刷メディア

QR Code の機能:

• エラー訂正レベル（低、中、四分位、高）
• 入力モード（数字、英数字、バイナリ、漢字）
• バージョン 1-40（21x21～177x177 モジュール）

Data Matrix の機能:

• エンコードタイプ（Auto、ASCII、ASCIINumeric、Base256）
• 正方形および長方形の形式
• 小さなラベルに適したコンパクトなサイズ

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの設定
• pubspec.yaml への依存関係の追加
• バーコードパッケージのインポート
• SfBarcodeGenerator の基本的な実装
• 最初の 1D バーコード（Code128）の作成
• 最初の QR コードの作成
• バーコードの下に入力値を表示
• 次のステップと学習手順

バーコードの種類とシンボル体系

📄 参照： references/barcode-types.md

• サンプル付きの1次元バーコード全12種類
• サンプル付きの2次元バーコード全2種類
• 各シンボル体系の詳細なプロパティ
• バーコードの種類ごとの入力検証ルール
• 対応文字と制限事項
• ユースケースに合ったバーコードの選び方
• シンボル体系の比較表
• バーコード選定のベストプラクティス

カスタマイズとスタイル設定

📄 参照： references/customization.md

• テキストのカスタマイズ（showValue、textStyle、textSpacing、textAlign）
• バーのカスタマイズ（module、barColor、backgroundColor）
• サイズとレイアウトの制御
• レスポンシブなサイズ設定の方法
• テキストスタイルのプロパティ（フォント、サイズ、ウェイト、色）
• 1次元および2次元バーコードのバー幅（module）の設定
• カスタマイズの完全なサンプル
• 読み取り可能なバーコードを作成するためのベストプラクティス

アクセシビリティ機能

📄 参照： references/accessibility.md

• 十分なコントラストのサポート
• 大きなフォントとテキストの拡大
• アクセシビリティに配慮した色のカスタマイズ
• MediaQueryData の統合
• アクセシビリティのベストプラクティス
• 読みやすさのテスト

クイックスタートのサンプル

基本的な QR コード

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,
          ),
        ),
      ),
    );
  }
}

基本的な Code128 バーコード

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,
          ),
        ),
      ),
    );
  }
}

小売商品用バーコード（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,
          ),
        ),
      ),
    );
  }
}

よく使われるパターン

パターン 1：誤り訂正機能付き QR コード

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

パターン 2：バーコードの外観のカスタマイズ

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

パターン 3：リスト内での複数のバーコードの種類

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);
}

パターン 4：レスポンシブなバーコードのサイズ設定

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,
        ),
      ),
    );
  }
}

主なプロパティ

SfBarcodeGenerator の必須プロパティ

プロパティ	型	説明	デフォルト
value	String	バーコードにエンコードするデータ	必須
symbology	Symbology	バーコードの種類（Code128、QRCode など）	Code128
showValue	bool	バーコードの下に入力値を表示するかどうか	false
barColor	Color	バーコードのバー／モジュールの色	Colors.black
backgroundColor	Color	バーコードの背景色	Colors.white
textStyle	TextStyle	表示するテキストのスタイル	Default TextStyle
textSpacing	double	バーコードとテキストの間隔	2
textAlign	TextAlign	テキストの水平方向の配置	TextAlign.center

共通のシンボル体系プロパティ

プロパティ	対象	説明	デフォルト
module	全種類	最小のバー／ドットの幅（論理ピクセル）	自動計算

Code39 固有のプロパティ

プロパティ	型	説明	デフォルト
enableCheckSum	bool	バーコードにチェックディジットを追加するかどうか	true

QR コード固有のプロパティ

プロパティ	型	説明	デフォルト
errorCorrectionLevel	ErrorCorrectionLevel	誤り訂正レベル（低、中、四分位、高）	high
codeVersion	QRCodeVersion	QR バージョン 1～40 または自動	auto
inputMode	QRInputMode	入力形式（数字、英数字、バイナリ、漢字）	binary

Data Matrix 固有のプロパティ

プロパティ	型	説明	デフォルト
encoding	DataMatrixEncoding	エンコーディング形式（自動、ASCII、ASCIINumeric、base256）	auto
dataMatrixSize	DataMatrixSize	サイズ設定	auto

一般的なユースケース

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コードを生成します

関連リソース

• パッケージ： syncfusion_flutter_barcodes
• API ドキュメント： SfBarcodeGenerator API
• GitHub のサンプル： Flutter Barcode Examples
• 動画チュートリアル： Flutter Barcode Generator の使い方
• 公式ドキュメント： Syncfusion Flutter Barcode User Guide