Customization in Flutter Barcodes (SfBarcodeGenerator)

5 May 202114 minutes to read

Text customization

Displaying input value

The provided input value of the barcode can be displayed by enabling its showValue property. By default, the showValue is false.

DART

@override
        Widget build(BuildContext context) {
            return Scaffold(
                backgroundColor: Colors.white,
                body: Center(
                    child: Container(
                        height: 150,
                        width: 300,
                        child: SfBarcodeGenerator(
                            value: '12634388927',
                            showValue: true)
                    )
                )
            );
        }

Text style customization

The style of the text can be customized with the textStyle property of the barcode generator.

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Center(
            child: Container(
                height: 150,
                width: 300,
                child: SfBarcodeGenerator(
                    value: '12634388927',

                    textStyle: TextStyle(fontFamily: 'Times',
                        fontSize: 16, fontStyle: FontStyle.italic,
                        fontWeight: FontWeight.bold,
                        color: Colors.red),
                    showValue: true)
            )
        )
    );
  }

Text spacing

The space between the text and the barcode can be controlled by the textSpacing property of barcode generator. By default, the value of textSpacing is 2.

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Center(
            child: Container(
                height: 150,
                width: 300,
                child: SfBarcodeGenerator(
                    value: '12634388927',
                    textSpacing: 25,
                    showValue: true)
            )
        )
    );
  }

Horizontal text alignment

The horizontal alignment of the text can be controlled by textAlign property of barcode generator. The displayed value can be positioned at start, center or end of the control. The default value of textAlign property is center.

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
            backgroundColor: Colors.white,
            body: Center(
            child: Container(
                height: 150,
                width: 240,
                child: SfBarcodeGenerator(
                  value: '12634',
                  textAlign: TextAlign.end,
                  showValue: true)
            )
        )
      );
    }

Bar customization

Bar width customization

Both the one dimensional and the two dimensional symbology support the module property. The property is used to define the size of the smallest line or dot of the barcode.

For one dimensional barcode, if this property is not set, the size of the smallest bar line is determined depending on the width available.

The following code snippet shows the one dimensional barcode with module property,

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
          child: Container(
            height: 150,
            width: 230,
            child: SfBarcodeGenerator(
              backgroundColor:  Color.fromRGBO(193, 250, 250, 1),
              value: '123456789',
              showValue: true,
              symbology: Codabar(module: 1)),
          )
        ),
      );
    }

NOTE

In the image above, the smallest bar line width is 1 logical pixel.

Below code snippet shows the one dimensional barcode without the module property,

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
          child: Container(
            height: 150,
            width: 230,
            child: SfBarcodeGenerator(
              backgroundColor: Color.fromRGBO(193, 250, 250, 1),
              value: '123456789',
              showValue: true,
              symbology: Codabar()),
          )
      ),
    );
  }

NOTE

In the image above, the smallest bar line width is calculated on the basis of the available width as a result of the total computed inputs(0’s and 1’s) divided by the available width.

For two dimensional barcode , if the module property is not set, the size of smallest dot is calculated based on the minimum of available width or height.

The following code snippet shows the two dimensional barcode with module property,

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
          child: Container(
            height: 150,
            width: 230,
            child: SfBarcodeGenerator(
               backgroundColor: Color.fromRGBO(193, 250, 250, 1),
              value: '123456789',
              symbology: QRCode(module: 2),),
          )
        ),
      );
    }

Below code snippet shows the two dimensional barcode without the module property,

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
          child: Container(
            height: 150,
            width: 230,
            child: SfBarcodeGenerator(
              backgroundColor: Color.fromRGBO(193, 250, 250, 1),
              value: '123456789',
              symbology: QRCode(),),
          )
        ),
      );
    }

Bar color customization

The bar color of the barcode can be customized by using its barColor property as like the following code snippet,

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Center(
            child: Container(
                height: 150,
                width: 240,
                child: SfBarcodeGenerator(
                  value: '12634',
                   barColor: Colors.deepPurple,
                 )
            )
        )
     );
    }

Background color customization

The background color of barcode can be customized with the backgroundColor property of barcode generator as like the below code snippet,

DART

@override
    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
          child: Container(
            height: 150,
            width: 230,
            child: SfBarcodeGenerator(
              backgroundColor: Color.fromRGBO(193, 250, 250, 1),
              value: '123456789',
              symbology: Codabar(),),
          )
       ),
      );
     }