Generate Barcodes in a Flutter App

Barcodes are widely used in apps for tracking inventory, products, tickets, and more. In this guide, you'll learn how to generate barcodes in a Flutter app using the barcode package.

Prerequisites
Make sure you have:

• Knowldge of flutter and dart programming.
• Flutter installed and running
• A basic Flutter project

Generate Barcodes in a Flutter App

Getting Started

A barcode is a visual, machine-readable representation of data. It typically consists of a series of parallel lines (bars) and spaces of varying widths that encode information. Barcodes are used to identify and track products, items, or documents in various industries, including retail, manufacturing, logistics, and healthcare. The barcode works in the followig way.

• A barcode scanner or a camera reads the barcode.
• The scanner detects the reflected light from the bars and spaces.
• The data is then decoded and sent to a computer system for processing.

Barcodes come in various types, each designed for different applications and industries. Broadly, barcodes are divided into 1D (one-dimensional) and 2D (two-dimensional) types. Here’s a breakdown:

• 1D Barcodes: Store less data, mostly numerical, require a barcode scanner with a laser.
• 2D Barcodes: Store more data (text, URLs, even images), can be scanned with camera-based scanners (like smartphones).

To generate barcode in a flutter app two packages are needed here, that are given below.

• barcode: is a Python library used to create barcode images(1D barcodes)
• flutter_svg: is a Flutter package that allows you to render SVG (Scalable Vector Graphics) files directly in your Flutter app. SVGs are vector-based images that scale well on different screen sizes and are often used for icons, logos, and illustrations.

Add these packages to your project as shown in the code below.

 dependencies:  
  flutter:  
   sdk: flutter  
  barcode: ^2.2.4  
  flutter_svg: ^2.0.7  

Then run the below command in the terminal to fetch the dependencies listed in the pubspec.yaml.

 flutter pub get  

Barcode Generator UI Code

The below code is building a Flutter app and provides more control over barcode generation, like exporting to files or rendering complex barcodes as SVG.

 import 'package:flutter/material.dart';  
 import 'package:barcode/barcode.dart';  
 import 'package:flutter_svg/flutter_svg.dart';  
 void main() {  
  runApp(MyApp());  
 }  
 class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
   return MaterialApp(  
    title: 'SVG Barcode Generator',  
    theme: ThemeData(primarySwatch: Colors.blue),  
    home: BarcodeSvgScreen(),  
   );  
  }  
 }  
 class BarcodeSvgScreen extends StatefulWidget {  
  @override  
  _BarcodeSvgScreenState createState() => _BarcodeSvgScreenState();  
 }  
 class _BarcodeSvgScreenState extends State<BarcodeSvgScreen> {  
  String _barcodeData = 'FLUTTER123';  
  String _svgCode = '';  
  @override  
  void initState() {  
   super.initState();  
   _generateSvg();  
  }  
  void _generateSvg() {  
   // 1. Create the barcode  
   final Barcode bc = Barcode.code128();  
   // 2. Generate the SVG with your data  
   final String svg = bc.toSvg(  
    _barcodeData,  
    width:  

Summary

With just a few lines of code, you can generate and display barcodes in your Flutter app. This approach is ideal for production apps where you need more than just rendering a simple barcode widget.

Thanks