Generating Barcodes Made Easy with the New Barcode Generator for Flutter
Tags: flutter, android, ios, webdev
Published: 2020-04-09 11:47:03

---
title: Generating Barcodes Made Easy with the New Barcode Generator for Flutter
published: true
date: 2020-04-02 11:17:00 UTC
tags: flutter, android, ios, webdev
canonical_url: https://www.syncfusion.com/blogs/post/generating-barcodes-made-easy-with-the-new-barcode-generator-for-flutter.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/28farmqp4npvg4ps5uoo.jpg
---

**Widgets are everywhere in this tech-driven world.**  **A world without widgets is unimaginable**!

From simple calculations to complex data analytics, widgets provide indispensable tools in everyday life.

So, to add another great asset to your toolbox, we have introduced one more diamond in our Flutter widgets crown with our [2020 Volume 1](https://www.syncfusion.com/forums/152921/essential-studio-2020-volume-1-release-v18-1-0-42-is-available-for-download) release! The [**Barcode Generator**](https://www.syncfusion.com/flutter-widgets/flutter-barcodes)!

In this blog, we are going to provide an overview of the Barcode Generator and how to add it in a Flutter application.

## Barcode Generator

The [Barcode Generator](https://www.syncfusion.com/flutter-widgets/flutter-barcodes) is simple, easy to use, and easy to integrate in your application. It can be used to generate and display data in machine-readable and industry-standard 1D and 2D barcodes. It provides a perfect approach to encoding input values using supported symbology types.

## Key features

The key features of the Barcode Generator include:

- Generation of 12 types of one-dimensional barcode symbologies: Code128; Code 128 A, B, and C; EAN8; EAN13; UPA-C; UPA-E; Code39; Code39 Extended; Code93; and Codabar.

![Supported 1D Symbologies](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Supported-1D-Symbologies-1.png)

- Generation of popular two-dimensional QR code from versions 1 to 40 and Data Matrix. ![QR and Data Matrix Barcode](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/QR-and-Data-Matrix-Barcode.png)
- Options to display barcodes with or without human-readable text.
- Options to customize the text style, spacing, and alignment.
- Options to customize the barcode height, width, background color, and foreground color.

## How to add Barcode Generator to your Flutter application

**Step 1:** Create a simple project using the instructions provided in the [getting started with your first Flutter app](https://flutter.dev/docs/get-started/test-drive?tab=vscode#create-app) documentation.

**Step 2:** Add the Syncfusion Flutter Barcode dependency to your **pubspec.yaml** file.

```js
dependencies:
syncfusion_flutter_barcodes: ^18.1.42-beta
```

**Step 3:** Run the following command to get the required packages.

```js
$ flutter pub get
```

**Step 4:** Import the following package in your Dart code.

```js
import 'package:syncfusion\_flutter\_barcodes/barcodes.dart';
```

**Step 5:** Add the Barcode Generator as a child to any of your Flutter widgets by using the following code snippet.

```js
@override
 Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
        body: Center(
            child: Container(
      height: 150,
      child: SfBarcodeGenerator(
        value: 'Syncfusion',
      ),
    ))),
  );
}
```

Here, the Barcode Generator is added as a child to the container widget. You have to specify the height of the container; otherwise the barcode will automatically take the container’s full height.

With this, the Barcode Generator widget is successfully integrated into the Flutter application.

### Generate 1D or linear barcode

You can create the 1D or linear barcode symbology by customizing the input type using the **symbology** property as illustrated in the following code example.

```js
SfBarcodeGenerator(
          value: 'Syncfusion',
          symbology: Code128(),
  ),
```

To display human-readable text (the input value) under the barcode, set the **showValue** property to **true** as in the following code snippet.

```js
SfBarcodeGenerator(
          value: 'Syncfusion',
          symbology: Code128(),
          showValue: true,
        ),
```

The generated Code 128 1D barcode with human-readable text will appear as follows. ![Code 128 1D barcode](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Code-128-1D-barcode.jpg)

### Generate QR code

You can create a QR code by specifying the **QRCode** symbology and add human-readable text under it by enabling the **showValue** property as shown in the following code example.

```js
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
              child: Container(
        height: 250,
        child: SfBarcodeGenerator(
          value: 'www.syncfusion.com',
          symbology: QRCode(),
          showValue: true,
        ),
      ))),
    );
  }
```

The generated QR code will be like the one given below. ![QR code](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/QR-code.jpg)

## Conclusion

In this blog post, we walked through the key features of our new Flutter Barcode Generator widget and how to integrate it into your application. Now it is your turn to add the Barcode Generator to your Flutter application. This Barcode Generator is available in our [2020 Volume 1](https://www.syncfusion.com/forums/152921/essential-studio-2020-volume-1-release-v18-1-0-42-is-available-for-download) release.

Also, please browse through the Barcode Generator [documentation ](https://help.syncfusion.com/flutter/barcode/getting-started)to learn more about the widget’s features and APIs. You can also see Syncfusion’s Flutter apps, which include many examples, in this [GitHub repo](https://github.com/syncfusion/flutter-examples). Don’t miss our demo app on [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) and the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341).

If you are looking for a Flutter widget that we don’t offer currently, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents), or [feedback portal](https://www.syncfusion.com/feedback/flutter). As always, we are happy to assist you!

The post [Generating Barcodes Made Easy with the New Barcode Generator for Flutter](https://www.syncfusion.com/blogs/post/generating-barcodes-made-easy-with-the-new-barcode-generator-for-flutter.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).