Getting started with Flutter Barcodes (SfBarcodeGenerator)

6 Jun 20235 minutes to read

This section explains the steps required to add the barcode and set its symbology. This section covers only basic features needed to get started with Syncfusion barcode generator widget.

Add Flutter Barcode to an application

Create a simple project using the instructions given in the Getting Started with your first Flutter app documentation.

Add dependency

Add the Syncfusion Flutter Barcode dependency to your pubspec.yaml file.

DART

dependencies:

    syncfusion_flutter_barcodes: ^xx.x.xx

NOTE

Here xx.x.xx denotes the current version of Syncfusion Flutter Barcodes package.

Get packages

Run the following command to get the required packages.

DART

$ flutter pub get

Import package

Import the following package in your Dart code.

DART

import 'package:syncfusion_flutter_barcodes/barcodes.dart';

Initialize the barcode

Add the Barcode Generator widget as a child of any widget. Here, the widget is added as a child of the container widget and the height to the container is specified (otherwise it will take full container height).

DART

@override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                body: Center(
                    child: Container(
                         height: 150,
                        child:SfBarcodeGenerator(value:'http://www.syncfusion.com')
                        )
                    )
                )      
            );
        }

NOTE

The default symbology of SfBarcodeGenerator is Code128.

Initialize QR Code symbology

You can set the required symbology type to the barcode generator based on input value by initializing the symbology property. In the following code snippet, the QR code is set as the barcode symbology.

DART

@override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                body: Center(
                    child: Container(
                        height: 350,
                        width: 350,
                        child:SfBarcodeGenerator(value:'http://www.syncfusion.com',
                         symbology: QRCode())
                        )
                    )
                )      
            );
        }

Display input value

The provided input value can be displayed below the barcode by enabling the showValue property of barcode as like the following code snippet,

DART

@override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                body: Center(
                    child: Container(
                        height: 350,
                        width: 350,
                        child:SfBarcodeGenerator(value:'http://www.syncfusion.com',
                         showValue: true, textSpacing: 15,
                         symbology: QRCode())
                        )
                    )
                )      
            );
        }