Barcode (Штрихкод)
Виджет Barcode используется для кодирования информации в виде линий и паттернов.
Данные, закодированные в штрихкоде, можно легко считать с помощью сканера,
приложений вроде Google Lens (Android), Apple Camera (iOS)
или собственного приложения (см. действие «Scan Barcode / QR Code»), созданного во FlutterFlow.
Обычно штрихкоды применяются для быстрого и точного получения информации о продукте.
Например, можно использовать их для учёта товаров или книг (цена, описание, местоположение и т. д.),
обмена ссылками на сайты и приложения, быстрой регистрации и других сценариев.
Добавление виджета Barcode
Чтобы добавить виджет Barcode в приложение:
- Нажмите + Add Widget, перетащите Barcode из вкладки Base Elements
или добавьте его напрямую через widget tree. - По умолчанию штрихкод отображается линейно — это 1D Barcode (набор линий и промежутков разной ширины).
Чтобы отобразить штрихкод в виде матрицы, например QR-кода, откройте панель свойств и установите параметр Barcode Dimensions в значение 2D Barcode. - Определите тип данных, которые хотите закодировать, и выберите Barcode Type.
Доступные типы зависят от выбранных Barcode Dimensions.
Например, для маркировки розничных товаров (12-значные числовые коды) используйте UPC-A или UPC-E,
а для кодирования URL — QR-Code. Если не уверены, какой тип выбрать, прочитайте эту статью. - Введите значение в поле Barcode Value.
Также можно нажать Set from Variable, чтобы подставить значение из состояния приложения, бэкенда или другого источника данных.
Настройка
Вы можете изменить внешний вид и поведение виджета Barcode с помощью параметров в панели свойств (Properties Panel).
Изменение размера
Чтобы изменить размеры виджета:
- Выберите Barcode.
- В панели свойств найдите поля Width и Height.
- Укажите желаемые значения ширины и высоты.
Изменение цвета
Чтобы изменить цвета штрихкода, выберите Barcode и настройте параметры
в панели свойств (инструкция):
- Foreground Color — цвет линий или паттернов.
- Background Color — цвет фона за ними.
Отображение текста под штрихкодом
Можно вывести текстовое значение под штрихкодом, включив параметр Show Text.
Эта опция доступна только для 1D Barcode.
Действие Scan Barcode / QR Code
С помощью этого действия можно открыть интерфейс для сканирования штрихкодов или QR-кодов
и считать их с помощью камеры устройства.
Настройка действия
Чтобы добавить действие сканирования к любому виджету:
- Откройте Properties Panel → Actions.
- Нажмите + Add Action.
- Выберите жест: On Tap, On Double Tap или On Long Press.
- Установите Action Type → Scan Barcode/QR Code.
- Отметьте Barcode Mode, если хотите использовать интерфейс в виде сканера штрихкодов.
Если флажок не установлен — будет использоваться интерфейс для QR-кодов. - В поле Cancel Button Text задайте текст кнопки отмены (по умолчанию — Cancel).
- В поле Output Variable Name укажите имя переменной, в которую сохранится результат сканирования.
Это значение можно использовать через Set from Variable → Action Outputs → [имя переменной].