Сканировать штрих-/QR код

С помощью этого действия вы открываете интерфейс штрихкода или QR-кода и сканируете код с помощью камеры устройства.

Перейдите на страницу вашего проекта во FlutterFlow и выполните следующие шаги, чтобы определить действие сканирования для любого виджета.

1. Выберите Действия на панели Свойства (правое меню)
2. Нажмите кнопку + Добавить действие
3. Выберите жест из выпадающего списка: «При касании», «При двойном касании» или «При длительном нажатии».
4. Выберите Тип действия как Сканировать штрихкод/QR-код.
5. Если вы установите флажок Режим штрих-кода, пользовательский интерфейс будет выглядеть как сканер штрих-кода. В противном случае пользовательский интерфейс будет выглядеть как сканер QR-кодов.
6. Текст кнопки Cancel по умолчанию будет Cancel, но вы можете указать любой другой текст, если хотите.
7. В поле Output Variable Name вы можете указать имя переменной, в которой будет сохранен отсканированный текст. Эта переменная может быть использована в других местах приложения для получения отсканированного текста.

В следующем демонстрационном примере показано, как можно добавить действие сканирования к виджету Button:

Значение, которое вы отсканировали с помощью этого действия, можно использовать для отображения в виде текста, отправить на другую страницу приложения или поделиться с любым другим пользователем.

Выполните следующие действия, чтобы отобразить отсканированное значение в виде текстового виджета:

1. Перетащите виджет «Текст» на холст. Если перед добавлением кнопки не был добавлен виджет Колонка, вам будет предложено добавить колонку, нажмите Добавить колонку.
2. Вы можете настроить виджет «Текст» в соответствии с вашими требованиями, добавив отступы, увеличив размер шрифта или изменив цвет текста.
3. Удалите текст по умолчанию, который установлен как «Hello World», нажмите на Set from Variable.
4. Выберите Source в качестве Action Outputs.
5. В разделе Доступные параметры выберите barcodeValue (или любое другое имя, которое вы задали в качестве имени выходной переменной при определении действия сканирования).
6. Введите в поле Значение по умолчанию текст, который будет отображаться, если значение переменной изначально пустое, перед сканированием.
7. Нажмите кнопку Сохранить.

Вы также можете использовать переменную в отдельном действии. Например, вы можете хранить переменную в базе данных Firestore, определив действие Backend Call Action.

Чтобы передать отсканированное значение на другую страницу приложения на FlutterFlow, сначала необходимо определить параметр на странице, куда вы хотите передать переменную, а затем использовать действие Navigate, определив параметр Pass.

Выполните следующие шаги, чтобы создать новую страницу и определить параметр:

1. Нажмите Добавить страницу на панели инструментов.
2. Добавьте имя страницы и выберите шаблон или выберите Пустая страница.
3. Щелкните (значок Добавить параметр) на панели свойств (правое меню).
4. Нажмите кнопку + Добавить параметр.
5. Введите имя параметра (например, scannedValue) и тип String.
6. Нажмите кнопку Сохранить.

Вернитесь на страницу, где определено действие сканирования. Выполните следующие действия:

1. Выберите кнопку, для которой ранее было определено действие сканирования.
2. Выберите Действия на панели свойств (правое меню).
3. Нажмите кнопку + Добавить действие.
4. Выберите жест из выпадающего списка: По касанию, По двойному касанию или По длительному нажатию.
5. Выберите Тип действия как Переход.
6. Выберите Тип навигации как Переход на страницу.
7. В поле Navigate To выберите страницу, на которой определен параметр.
8. Нажмите + Передать в параметре, выберите имя параметра.
9. Выберите Источник значения как Из переменной, Источник как Выходы действия, затем Доступные параметры как имя переменной, в которой было сохранено отсканированное значение (например, barcodeValue).

Вы можете просмотреть код, который генерируется FlutterFlow в фоновом режиме, перейдя в меню Разработчик > Просмотр кода на панели инструментов.

При добавлении действия Scan Action будет сгенерирован код, подобный следующему:

В приведенном выше фрагменте кода FlutterBarcodeScanner.scanBarcode используется для запуска действия сканирования штрихкода/QR-кода. FlutterFlow использует плагин flutter_barcode_scanner для отображения интерфейса сканирования и для обработки изображения.

• Хотите узнать, как можно использовать несколько действий? Загляните на эту страницу.
• Узнать больше о пакете flutter_barcode_scanner можно здесь.