Barcode

The Barcode widget is used to embed the information inside the series of lines and patterns. The data inside the barcode can be easily retried with a scanner machine, an app like Google Lens (Android), Apple Camera (iOS), or your own app created using FlutterFlow.

It is typically used to retrieve product information quickly and accurately. For example, you could track the inventory/books (e.g., price, description, location, etc.), share website/app URL, quick onboarding process, and so on.

To add a Barcode widget to your app:

First, click on the + Add Widget, drag the Barcode widget from the Base Elements tab, or add it directly from the widget tree.
By default, the barcode is displayed in a linear fashion called 1D Barcode. (i.e., a series of lines and space of various widths). To display the barcode in a matrix form, such as QR-Code, move to the properties panel and set the Barcode Dimensions to the 2D Barcode.
Now, you'll need to figure out the type of information you want to embed and select the Barcode Type. The barcode type options are available based on the Barcode Dimensions you selected in the previous step. For example, to label the retail products (i.e., 12 digits numeric only number), you can set it to UPC-A or UPC-E, and to embed the URL, you can set it to the QR-Code. If you are unsure which type to choose, here is a guide to help.
Finally, you can provide the data/information into the Barcode Value property. You can also click Set from Variable to set it based on the value from the app state, your backend, or any other source.

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Changing size

To change the size of the barcode widget, select the Barcode widget, move to the properties panel, find the Width and Height property and enter the values.

Changing color

To change barcode colors, select the Barcode widget, move to the properties panel, and change the colors for the following properties:

Foreground Color: This sets the line or pattern color.
Background Color: This sets the background color behind the line or pattern.

Show barcode text

You can also display the actual data below the barcode by enabling the Show Text property. Note that this option is only available when using the 1D Barcode.