QR Code Generation - Java on Server-Side & Flutter on Client-Side

In this post, we will explore different strategies for generating QR code images in Java backend and mobile Flutter apps.

Quick Response (QR) codes have become an essential tool for businesses to convey information quickly and easily. With the rise of mobile devices, generating QR codes has become a common requirement for various applications.

Server-Side QR Code Generation (Java)

When it comes to server-side generation, there are two approaches:

1. One-time Generation

If you have a medium size number of images, you could generate them upfront and serve them as files. it’s more efficient to generate all the QR codes at once on the server. This approach allows for batch processing and reduces the load on your server – with no additional runtime processing. You could move them to remote CDN and offload the work on your application server.

Here is an example in Java using ZXing library:

import com.google.zxing.BarcodeFormat;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.qrcode.QRCodeWriter;

public class QRCodeGenerator {
    public static void generateQRCodes(String[] data, String directory) throws Exception {
        for (String item : data) {
            // Create a QR code
            BitMatrix bitMatrix = new QRCodeWriter().encode(item, BarcodeFormat.QR_CODE, 200, 200);
            
            // Save the image
            MatrixToImageWriter.writeToPath(bitMatrix, "png", directory + "/" + item + ".png");
        }
    }
}

2. Runtime Generation

If you have a small number of items, dynamic content that needs to be QRed, or so big amount of items – that it becomes inpractical to pre-generate.

you could create QR on runtime,
or it’s better to delegate the generation on the client-side. https://programtom.com/appcenter.online/app.php?id=38

Client-Side Generation (Flutter)

Delegating on client side offloads work to the client. There are libraries for JavaScript, Android and Flutter. When developing mobile apps with Flutter, we can use libraries like ZXing to generate QR codes on the fly.

Here is an example in Flutter using ZXing library:

import 'package:flutter/material.dart';
import 'package:zxing_flutter/zxing_flutter.dart';

class QrCodeGenerator extends StatefulWidget {
  @override
  _QrCodeGeneratorState createState() => _QrCodeGeneratorState();
}

class _QrCodeGeneratorState extends State<QrCodeGenerator> {
  String _qrCode = '';

  void _generateQRCode(String data) {
    // Create a QR code
    final qrCode = BarcodeFormats.qrCode.encode(data, BarcodeFormat.QR_CODE);
    
    setState(() {
      _qrCode = qrCode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('QR Code Generator')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // QR code image
            Image(image: AssetImage(_qrCode)),
            
            // Generate button
            ElevatedButton(
              onPressed: () {
                _generateQRCode('Hello, World!');
              },
              child: Text('Generate QR Code'),
            ),
          ],
        ),
      ),
    );
  }
}