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).
Code overview
You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes. 
Adding the Scan Action will generate a code like the following:
In the above code snippet, FlutterBarcodeScanner.scanBarcode is used to trigger the barcode/QR code scanning action. FlutterFlow uses flutter_barcode_scanner plugin to display the scanning interface and for processing the image.
References
Want to know how you can use multiple actions? Check out this page.
Learn more about the flutter_barcode_scanner package here.

Show Snack Bar

Animation Action

Last modified 5mo ago

Copy link

Contents

Defining Scan Action

Using the Scanned Variable

Passing Scanned Value to a different Page

Code overview

References