Scan Barcode/QR code

Using this Action, you open a barcode or QR code interface and scan a code using the device camera.

Defining Scan Action

Go to your project page on FlutterFlow and follow the steps below to define a Scan Action to any widget.

1. Select Actions from the Properties panel (the right menu)

2. Click + Add Action button

3. Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press

4. Select the Action Type as Scan Barcode/QR code.

5. If you check the Barcode Mode checkbox then the UI will look like a barcode scanner. Otherwise, the UI will be like a QR code scanner.

6. Cancel button text would be Cancel by default, but you can specify any other text if you want.

7. In the Output Variable Name field, you can specify the name of the variable where the scanned text would be saved. This variable can be used elsewhere in the app to get the scanned text.

The following demo shows how you can add the Scan Action to a Button widget:

Using the Scanned Variable

The value that you have scanned using this action can be used to display as text, send to a different page of the app, or share with any other user.

Follow the steps below to display the scanned value as a Text widget:

1. Drag and drop a Text widget onto the canvas. If you don't have a Column widget added before adding the Button, you will be prompted whether you want to add a Column, click Add Column.

2. You can customize the Text widget as per your requirement by adding some Padding, increasing Font Size, or changing the Text Color.

3. Remove the default text that is set to "Hello World", click on Set from Variable.

4. Select the Source as Action Outputs.

5. Under Available Options, select barcodeValue (or any other name that you had set as the Output Variable Name while defining the Scan Action).

6. Enter a text in the Default Value field that would be shown when the variable value is empty initially, before scanning.

7. Click Save.

You can also use the variable in a separate Action. For example, you can store the variable inside a Firestore database by defining a Backend Call Action.

Passing Scanned Value to a different Page

To pass the scanned value to a different page of the app on FlutterFlow, first you have to define a Parameter on the page where you want to pass the variable and then use the Navigate Action by defining the Pass Parameter.

Follow the steps below to create a new page and define a parameter:

1. Click Add Page present on the Tool Bar.

2. Add a name of the page and select a template or choose a Blank Page.

3. Click (Add Parameter Icon) present on the Properties Panel (right menu).
4. Click + Add Parameter button.

5. Enter a Parameter Name (eg. scannedValue) and Type as String.

6. Click Save.

Go back to the page where you have the Scan Action defined. Follow the steps below:

1. Select the Button on which you had defined the Scan Action earlier.

2. Select Actions from the Properties panel (right menu).

3. Click + Add Action button.

4. Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.

5. Select the Action Type as Navigate.

6. Select the Navigation Type as Navigate to Page.

7. Under Navigate To, select the page where you have defined the Parameter.

8. Click + Pass in Parameter, select the Parameter name.

9. Select the Value Source as From Variable, Source as Action Outputs, then Available Options as the variable name where you had stored the scanned value (eg. barcodeValue).