Customization in Flutter Barcodes (SfBarcodeGenerator)

27 Jul 202512 minutes to read

Text customization

Displaying input value

To display the input value of the barcode, enable its showValue property. By default, it is set to 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 text style can be customized using 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

Control the space between the text and the barcode with the textSpacing property of barcode generator. By default, it is set to 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 text alignment can be managed with the textAlign property of barcode generator. Position the displayed text at the 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 one-dimensional and two-dimensional symbologies support the module property. This defines the size of the smallest line or dot in the barcode.

For one-dimensional barcodes, if not set, the smallest bar line size depends on the available width.

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

For two dimensional barcode , if the module property is not set, the smallest dot size 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

Customize the barcode’s bar color using the 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

You can customize the barcode’s background color 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(),
          ),
        ),
      ),
    );
  }