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

    show text

    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 customization

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

    text spacing

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

    text align

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

    with module value

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

    without module value

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

    QR with module value

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

    QR without module value

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

    bar color

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

    background color