Состояние виджета

Состояние виджета — данные, которые виджет держит в себе и которые меняются по ходу работы приложения: введённый текст, отметка флажка, выбранный вариант. Больше всего это касается виджетов форм — именно они реагируют на действия пользователя.

Отдельно стоит состояние фокуса: находится ли курсор ввода в этом виджете. Виджет в фокусе готов принимать ввод и обычно показывает это внешне — например, мигающим курсором в поле.

Что важно понимать:

Значения меняются на ходу — это то, что пользователь ввёл или выбрал.
Кодом это не управляется — FlutterFlow ведёт состояние сам.
Изменение сразу видно — виджет перерисовывается без дополнительных действий.

Состояние виджетов форм создавать и вести не нужно — FlutterFlow делает это за вас.

Что открыто по умолчанию:

Text Field — введённый текст и результат проверки.
Checkbox — отмечен флажок или нет.
Radio Button — какой вариант выбран.

Ниже видно, как состояние и фокус виджета TextField появляются в меню переменных на той же странице:

:::tip[Область видимости] Состояния виджетов доступны на той странице или в том компоненте, где эти виджеты созданы. Но есть важное дополнение: когда компонент добавлен на страницу, его состояния становятся видны и странице.

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

Это и работает: Set Variable menu > Widget State > [имя_компонента] > [ваш_виджет].

Открыть на loom.com

:::

Состояние можно и менять — готовыми действиями. Например, чтобы очистить поле после отправки формы, добавьте в поток действий кнопки Clear TextField.

Триггеры действий у виджетов форм

К состоянию виджета привязываются триггеры: вызвать API при потере фокуса полем, поменять вид кнопки при установке флажка.

Самые ходовые:

On Focus Change — виджет получил или потерял фокус. Пример: показать подсказку, как только пользователь начал заполнять поле.
On Submit — форма или поле отправлены. Пример: проверить ввод и отправить данные по нажатию Enter.
On Change — значение изменилось. Пример: проверять ввод по ходу набора или пересчитывать итог при смене варианта в списке.
On Completed — ввод завершён; так устроен PinCode. Пример: перейти к следующему шагу, как только код набран полностью.
On Selected — выбран вариант в choice chip, флажке, переключателе или на ползунке. Пример: обновить экран под сделанный выбор.