How to Create a Barcode Scanner in FlutterFlow

Navigate to Custom Code in the left Navigation Menu and click the Pubspec Dependencies tab. Add mobile_scanner with version ^5.0.0. Click Save. This package is the recommended successor to qr_code_scanner and supports QR codes, UPC, EAN, Code128, and all major barcode formats on both iOS and Android.

Go to Custom Code → Custom Widgets → Add. Name it BarcodeScannerWidget. Add parameters: onBarcodeScanned (Action, required) to pass the result back to the parent. In the code editor, create a StatefulWidget. In initState, create a MobileScannerController with detectionSpeed set to DetectionSpeed.normal, facing set to CameraFacing.back, and torchEnabled set to false. In build, return a MobileScanner widget with the controller and an onDetect callback that extracts the barcode value.

1import 'package:mobile_scanner/mobile_scanner.dart';
2
3class BarcodeScannerWidget extends StatefulWidget {
4  const BarcodeScannerWidget({
5    super.key,
6    this.width,
7    this.height,
8    required this.onBarcodeScanned,
9  });
10  final double? width;
11  final double? height;
12  final Future Function(String barcodeValue) onBarcodeScanned;
13
14  @override
15  State<BarcodeScannerWidget> createState() => _BarcodeScannerWidgetState();
16}
17
18class _BarcodeScannerWidgetState extends State<BarcodeScannerWidget> {
19  final MobileScannerController _controller = MobileScannerController(
20    detectionSpeed: DetectionSpeed.normal,
21    facing: CameraFacing.back,
22    torchEnabled: false,
23  );
24  bool _hasScanned = false;
25
26  @override
27  void dispose() {
28    _controller.dispose();
29    super.dispose();
30  }
31
32  @override
33  Widget build(BuildContext context) {
34    return SizedBox(
35      width: widget.width ?? double.infinity,
36      height: widget.height ?? 400,
37      child: MobileScanner(
38        controller: _controller,
39        onDetect: (capture) {
40          if (_hasScanned) return;
41          final barcode = capture.barcodes.firstOrNull;
42          if (barcode?.rawValue != null) {
43            _hasScanned = true;
44            widget.onBarcodeScanned(barcode!.rawValue!);
45          }
46        },
47      ),
48    );
49  }
50}

Wrap the MobileScanner in a Stack. Add a second child to the Stack: a CustomPaint or a Column of Containers creating a darkened overlay with a transparent rectangular cutout in the center. The cutout acts as a visual target — users aim the barcode within this frame. Use Container widgets with semi-transparent black background around the edges, leaving the center open. Add a thin border Container (2px, white) around the cutout for the scanning frame indicator.

Below or overlaying the scanner, add an IconButton for torch/flash toggle. On Tap, call controller.toggleTorch(). Use a StreamBuilder on controller.torchState to toggle the icon between flash_on and flash_off. Below the scanner, add a Text widget bound to a Page State variable scannedResult that updates when the onBarcodeScanned callback fires. After scanning, you can automatically navigate to a product detail page or show the result in a dialog.

On the page where you placed the BarcodeScannerWidget, bind the onBarcodeScanned Action Parameter to an action flow. In the flow: update Page State scannedResult with the barcode value, then either navigate to a lookup page passing the value as a Route Parameter, or call an API/Backend Query to look up the product by barcode. Add a reset mechanism — a Scan Again button that sets _hasScanned back to false (via a Custom Action calling a method on the widget, or by rebuilding the widget).