Scanning Codes

Scan a code opens the camera, reads a QR code or a barcode, and hands what it says to the next step: open the ticket it names, look the product up, or say it back. One design scans on iOS, Android and the web.

Adding a scan

Add Scan a code to a button and fill in:

ReadsQR codes, or any code: QR, EAN-13 and EAN-8, UPC-A and UPC-E, Code 128, 39 and 93, ITF-14, Codabar, Data Matrix, PDF417 and Aztec. A code it was not told to read is ignored.

Result nameWhat the next steps call what it read, such as ticket.

On successWhat runs once a code is read.

On deniedWhat runs when the camera is refused, as on the Asking for Permission page.

The scanner covers the screen with the camera, a square frame, “Point the camera at a code”, a Close button and, where the device has one, the torch. It stops at the first code it reads, with a light vibration on a phone. Closed with nothing read, nothing runs.

Using what it read

The result has two fields: value, what the code says, and format, which kind of code it was (qr, ean13, code128 and so on). Pick them in the data picker anywhere after the scan: a screen parameter, a list's filter, a message.

checking a ticket in

text

Scan a code      Reads: QR codes, Result name: ticket
  On success     Go to Ticket, with id = ticket → value
  On denied      Show "The camera is {reason}"

The camera

The camera is asked for first, exactly as Ask for permission does, so there is never an Ask for permission in front of a scan. Refused, On denied runs with the reason (denied, blocked or unavailable); without one, the app says the camera is off, with Open settings on a phone. iOS shows your Camera message from App, Permission messages.

In a browser the browser asks too, and a computer with no camera is unavailable. A browser that has been refused once will not ask again, so there the reason is blocked.

What each export uses

Flutter. mobile_scanner, through the generated core's scan.dart.

Expo. expo-camera's camera, in a scanner every app carries; an app that scans nothing does not install it.

Web. The browser's own code reader where it has one, else a reader bundled with your app. Its files are served by your app, never fetched from anywhere else, and it loads only when a scan first opens.

Flutter apps in a browser

Where the browser has no code reader of its own (Safari, Firefox), a Flutter app running on the web loads one from the jsDelivr CDN the first time it scans. Phones load nothing. Checks notes this on a Flutter app that scans.

Trying it

In Preview there is no camera: a scan asks you to type what the code says, then runs On success with it. On a device, point the camera at any QR code. To check the refused case, turn the camera off for the app in Settings first.