Getting started with Flutter Barcodes (SfBarcodeGenerator)

5 May 20215 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 barcode generator

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

    symbology to barcode

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

    Text to barcode