How to Build a QR Code Generator and Reader in FlutterFlow

In FlutterFlow, go to Custom Code and create a new Custom Widget named QRCodeGenerator. Add a parameter: data (String) for the content to encode, and an optional size (Double, default 200). Add the qr_flutter package as a dependency. In the widget body, return a QrImageView widget with data set to widget.data, version set to QrVersions.auto, and size set to widget.size. Wrap it in a Container with a white background and padding of 16 for a clean border around the QR code. This widget can encode any string: URLs, plain text, contact info, or WiFi credentials.

1// Custom Widget: QRCodeGenerator
2import 'package:qr_flutter/qr_flutter.dart';
3
4class QRCodeGenerator extends StatelessWidget {
5  final String data;
6  final double? size;
7
8  const QRCodeGenerator({
9    required this.data,
10    this.size = 200,
11    super.key,
12  });
13
14  @override
15  Widget build(BuildContext context) {
16    return Container(
17      padding: const EdgeInsets.all(16),
18      decoration: BoxDecoration(
19        color: Colors.white,
20        borderRadius: BorderRadius.circular(12),
21      ),
22      child: QrImageView(
23        data: data,
24        version: QrVersions.auto,
25        size: size ?? 200,
26        gapless: true,
27        errorCorrectionLevel: QrErrorCorrectLevel.M,
28      ),
29    );
30  }
31}

Create a QRGeneratorPage with a TextField at the top for entering the data to encode (hint text: 'Enter URL, text, or data'). Below, add the QRCodeGenerator Custom Widget with its data parameter bound to the TextField value via Page State. Add a DropDown for quick data templates: URL, WiFi, Contact (vCard), Plain Text. When WiFi is selected, show additional TextFields for network name, password, and encryption type (WPA/WEP/none), then compose the WiFi QR format: 'WIFI:T:{encryption};S:{ssid};P:{password};;'. For vCard, show name, phone, and email fields and compose: 'BEGIN:VCARD\nVERSION:3.0\nN:{name}\nTEL:{phone}\nEMAIL:{email}\nEND:VCARD'. The QR code updates in real time as the user types.

Create a Custom Action named saveQRCodeAsImage. This action wraps the QR widget in a RepaintBoundary with a GlobalKey, renders it to an image using boundary.toImage(), converts to PNG bytes, and saves to the device gallery using the image_gallery_saver package (or shares directly via share_plus). In the QRGeneratorPage, add a Button labeled 'Save QR Code' below the QR widget. On Tap, call this Custom Action. Alternatively, use a simpler approach: add a Share button that calls a Custom Action composing the QR data into a shareable format and opens the native share sheet, or use the screenshot package to capture the widget area.

1// Custom Action: saveQRAsImage
2import 'dart:ui' as ui;
3import 'dart:typed_data';
4import 'package:flutter/rendering.dart';
5import 'package:share_plus/share_plus.dart';
6import 'dart:io';
7import 'package:path_provider/path_provider.dart';
8
9Future saveQRAsImage(GlobalKey repaintKey) async {
10  final boundary = repaintKey.currentContext!
11      .findRenderObject() as RenderRepaintBoundary;
12  final image = await boundary.toImage(pixelRatio: 3.0);
13  final byteData = await image.toByteData(
14    format: ui.ImageByteFormat.png,
15  );
16  final bytes = byteData!.buffer.asUint8List();
17  final dir = await getTemporaryDirectory();
18  final file = File('${dir.path}/qr_code.png');
19  await file.writeAsBytes(bytes);
20  await Share.shareXFiles([XFile(file.path)], text: 'QR Code');
21}

Create a new Custom Widget named QRCodeReader. Add the mobile_scanner package as a dependency. Add an Action Parameter callback named onScanned (returns String) that sends the decoded data back to the parent page. In the widget body, return a MobileScanner widget with onDetect callback. When a barcode is detected, extract the rawValue, call the onScanned callback with the value, and optionally stop the scanner to prevent repeated scans by calling controller.stop(). Add a camera overlay with a transparent center square and semi-transparent borders to guide the user where to point the camera.

1// Custom Widget: QRCodeReader
2import 'package:mobile_scanner/mobile_scanner.dart';
3
4class QRCodeReader extends StatefulWidget {
5  final Future Function(String scannedData) onScanned;
6  const QRCodeReader({required this.onScanned, super.key});
7
8  @override
9  State<QRCodeReader> createState() => _QRCodeReaderState();
10}
11
12class _QRCodeReaderState extends State<QRCodeReader> {
13  final MobileScannerController _controller = MobileScannerController();
14  bool _hasScanned = false;
15
16  @override
17  Widget build(BuildContext context) {
18    return MobileScanner(
19      controller: _controller,
20      onDetect: (capture) {
21        if (_hasScanned) return;
22        final barcode = capture.barcodes.firstOrNull;
23        if (barcode?.rawValue != null) {
24          _hasScanned = true;
25          _controller.stop();
26          widget.onScanned(barcode!.rawValue!);
27        }
28      },
29    );
30  }
31
32  @override
33  void dispose() {
34    _controller.dispose();
35    super.dispose();
36  }
37}

Create a QRScannerPage with the QRCodeReader Custom Widget filling the screen. Wire the onScanned callback to set Page State scannedData with the result and show a BottomSheet displaying the decoded content. Create a Custom Function named detectQRDataType that analyzes the scanned string: if it starts with 'http://' or 'https://', return 'url'; if it starts with 'WIFI:', return 'wifi'; if it starts with 'BEGIN:VCARD', return 'vcard'; otherwise return 'text'. Based on the detected type, show different action buttons in the BottomSheet: URL shows 'Open Link' (Launch URL action) and 'Copy' (Clipboard); WiFi shows 'Connect' (parse SSID and password, display them); vCard shows 'Save Contact' (parse name, phone, email); plain text shows 'Copy to Clipboard'. Add a 'Scan Again' button that resets the scanner.