Customization in Flutter Barcode Generator (SfBarcodeGenerator)

18 Nov 201816 minutes to read

To get started with the Flutter Barcode Generator and set up the package, refer to the Getting Started with Flutter Barcode Generator documentation.

Text customization

Displaying input value

To display the input value of the Barcode Generator, enable its showValue property. By default, it is set to false.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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 text style can be customized using the textStyle property of the Flutter Barcode Generator.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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

Control the space between the text and the barcode with the textSpacing property of the Flutter Barcode Generator. By default, it is set to 2.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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 text alignment can be managed with the textAlign property of the Flutter Barcode Generator. Position the displayed text at the start, center or end of the control. The default value of textAlign property is center.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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 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 the module property. The only difference between this and the sample without the module property is the module value passed to the symbology.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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.

The following code snippet shows the one-dimensional barcode without the module property.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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

For two-dimensional barcodes, 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 the module property.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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

The following code snippet shows the two-dimensional barcode without the module property.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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

Customize the bar color of the Barcode Generator using the barColor property as shown in the following code snippet.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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

You can customize the background color of the Barcode Generator using the backgroundColor property, as shown in the following code snippet.

import 'package:flutter/material.dart';
  import 'package:syncfusion_flutter_barcodes/barcodes.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @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