PinCode

PinCode — ряд отдельных полей для ввода PIN-кода или одноразового пароля (OTP). Пригодится везде, где нужно подтвердить аккаунт, вход, платёж или привязку устройства.

Введённый код можно взять и использовать в действиях и условиях: FlutterFlow хранит его в состоянии виджета PinCode.

PinCode принимает код, отдаёт его через Widget State и отправляет на защищённый сервис для проверки

внимание

Обращайтесь с кодами осторожно

PIN и одноразовые коды не должны покидать сценарий ввода и проверки. Не выводите их в снекбары, логи, аналитику и отчёты об ошибках и не храните открытым текстом. Отправляйте код на проверку сервису авторизации или защищённому бэкенду: сравнение на стороне клиента само по себе ничего не гарантирует.

Откройте Widget Palette и добавьте PinCode из раздела Form Elements.
Выделите виджет и откройте панель свойств.
В Pin Code Properties задайте в Pin Length число символов кода. Максимум — 8.
Выберите Keyboard Type, подходящий под код.

События

Эти события доступны на вкладке Actions виджета.

On Completed

Срабатывает, когда число введённых символов достигло Pin Length. Здесь удобно отправить код на проверку, открыть следующий шаг или обновить интерфейс.

Событие говорит лишь о том, что все поля заполнены, — не о том, что код верный.

On Change

Срабатывает при каждом вводе или удалении символа. Подходит, чтобы обновлять интерфейс по ходу ввода. Подробнее — On Change.

On Focus Change

Срабатывает, когда PinCode получает или теряет фокус. Можно обновить подсказку или проверить ввод, когда пользователь ушёл с поля. Подробнее — On Focus Change.

Проверка

Проверка PIN или одноразового кода — это три разные проверки:

Поле не пустое.
В коде нужное число символов.
Код правильный.

1. Код обязателен

Не дать отправить пустой PinCode поможет Form:

Поместите PinCode внутрь виджета Form.
Выделите Form и откройте Properties Panel > Validation.
Найдите PinCode, включите для него проверку и введите сообщение для пустого поля.
Выделите кнопку или другой элемент, который отправляет код, и откройте вкладку Actions.
Добавьте действие Validate Form и в Select Form to Validate выберите форму с PinCode.

Если пользователь отправит форму без кода, FlutterFlow покажет сообщение об ошибке.

2. Код введён полностью

Прежде чем проверять код, убедитесь, что введены все символы по Pin Length. Можно продолжать сценарий из On Completed или добавить условие на длину введённого значения.

3. Код верный

Отправьте полное значение сервису авторизации или защищённому бэкенду. Продолжайте сценарий, только если сервис подтвердил код.

внимание

Проверка формы смотрит лишь на то, пустой ли PinCode. Ни заполненность всех полей, ни правильность кода она не подтверждает.

Настройка

Выделите PinCode и откройте Pin Code Properties в панели свойств.

Ввод

Pin Length — число символов кода, до 8.
Keyboard Type — по умолчанию цифровая клавиатура. Если в коде бывают буквы, выберите Visible Password. Раскладка зависит от платформы.

Анимация ввода

Animation — анимация при вводе символа, например Slide.
Animation Curve — как анимация ускоряется и замедляется. Unset — кривая по умолчанию.
Animation Duration (ms) — длительность в миллисекундах.

Скрытие символов

Obscure Text — заменяет каждый введённый символ на Obscuring Character.
Obscuring Character — символ, которым скрывается ввод.
Blink When Obscuring — короткая вспышка, когда только что введённый символ скрывается.
Blink Duration — длительность вспышки в миллисекундах.

Поведение поля

Hint Text — показывает Hint Character в каждом пустом поле.
Hint Character — символ-подсказка для пустых полей.
Auto Focus — при загрузке страницы ставит фокус на PinCode и открывает клавиатуру. Выключите, если первым фокус должен получить другой элемент.
Auto Fill — разрешает системе подставить пришедший код подтверждения. Работает не везде: зависит от платформы, настроек устройства и формата сообщения.
Read Only — значение видно, но изменить его нельзя.
Haptic Feedback — тактильный отклик при вводе символа на поддерживающих устройствах.

Выравнивание полей

Pin Code Alignment расставляет поля по доступной ширине:

Start — в начале;
Center — по центру;
End — в конце;
Space Evenly — одинаковые отступы до, между и после полей;
Space Around — отступ вокруг каждого поля, по краям он меньше;
Space Between — одинаковые промежутки между полями, без отступов по краям.

Форма и размер полей

Pin Field Shape — Box, Circle или Underline.
Field Width и Field Height — размеры каждого поля.
Для Box скругление углов задаёт Border Radius, толщину рамки — Border Width.

Цвета, заливка и рамка ошибки

Эти свойства различают состояния полей:

Active Color — рамка заполненного поля.
Inactive Color — рамка пустого поля.
Selected Color — рамка поля в фокусе.
Background Color — фон всего виджета, включая пространство вокруг полей.
Enable Active Fill — заливать ли фон полей. Если включено, появляются три следующих свойства.
Active Fill Color — заливка заполненного поля.
Inactive Fill Color — заливка пустого поля.
Selected Fill Color — заливка поля в фокусе.
Error Text Height — место по высоте под сообщение об ошибке.
Error Border Width — толщина рамки при ошибке проверки.
Error Border Color — цвет рамки при ошибке проверки.

Не передавайте ошибку или состояние одним только цветом — добавьте понятный текст или сообщение об ошибке.

Курсор

Show Cursor показывает или прячет текстовый курсор, Cursor Color задаёт его цвет.

Стиль символов

Раскройте Pin Code Text Style, чтобы настроить вид введённых символов:

Theme Text Style — стиль текста из темы проекта как основа;
Font Family — шрифт;
Font Weight — насыщенность;
Styling — курсив, подчёркивание или зачёркивание;
Font Size — размер;
Text Color — цвет;
Line Height — вертикальные отступы внутри поля;
Letter Spacing — промежуток вокруг символа;
Text Align — выравнивание символа внутри поля;
Add Shadow — тень под символами;
Text Overflow Replacement — что делать, если символ не помещается в поле.

Получение и очистка значения

Чтобы использовать код в действии, выберите Set from Variable > Widget State и укажите виджет PinCode.

Очистить введённый код можно, только если PinCode лежит внутри Form: тогда добавьте действие Reset Form Field и выберите PinCode. Стирайте чувствительные значения после проверки и когда пользователь запрашивает новый код.