[auth] add padding to the generated QR code image to prevent coner ey… (#4591)

## Description
Some QR codes (especially those with smaller data) had their corner
alignment patterns (the three large squares) partially cut off, reducing
readability and making them potentially invalid for scanning.

Added padding (**20.0** on each side) around the QR code to ensure that
corner alignment patterns are never cut off.


![image](https://github.com/user-attachments/assets/bb769862-e882-436f-8dbf-58642e1221b5)
This commit is contained in:
Neeraj Gupta
2025-01-06 11:34:05 +05:30
committed by GitHub

View File

@@ -8,9 +8,17 @@ import 'package:intl/intl.dart';
import 'package:qr_flutter/qr_flutter.dart';
Future<String> generateQRImageBase64(String data) async {
final qrPainter = QrPainter(
const size = 250.0;
const padding = 20.0;
final qrCode = QrCode.fromData(
data: data,
version: QrVersions.auto,
errorCorrectLevel: QrErrorCorrectLevel.L,
);
final qrPainter = QrPainter.withQr(
qr: qrCode,
gapless: true,
eyeStyle: const QrEyeStyle(
eyeShape: QrEyeShape.square,
color: Colors.black,
@@ -21,12 +29,18 @@ Future<String> generateQRImageBase64(String data) async {
),
);
const size = 250.0;
const totalSize = size + padding * 2;
final recorder = ui.PictureRecorder();
final canvas = Canvas(recorder);
qrPainter.paint(canvas, const Size(size, size));
const paintBounds = Size(size, size);
canvas.translate(padding, padding);
qrPainter.paint(canvas, paintBounds);
final picture = recorder.endRecording();
final img = await picture.toImage(size.toInt(), size.toInt());
final img = await picture.toImage(totalSize.toInt(), totalSize.toInt());
final byteData = await img.toByteData(format: ui.ImageByteFormat.png);
final pngBytes = byteData!.buffer.asUint8List();