Жизненный цикл страницы
Страница проходит путь от создания до выгрузки из памяти, и знание этих этапов определяет, где выполнять запросы, где заводить переменные, а где освобождать ресурсы.
Ключевые моменты в жизни страницы:
- Инициализация. Страница готовится к показу: загружаются исходные данные, задаются значения по умолчанию, поднимается состояние.
- Отрисовка. Страница появляется на экране: вёрстка, стили, интерактивные элементы. Пользователь видит её в исходном состоянии.
- Обновление. Страница реагирует на нажатия, ввод и жесты; в ответ перерисовывается частично или целиком.
- Выгрузка. Пользователь ушёл со страницы — связанные с ней ресурсы освобождаются.
Большую часть этой механики FlutterFlow берёт на себя. Наружу вынесено то, что решаете вы: что подгрузить при инициализации и когда перерисовать интерфейс.
Триггеры действий страницы
У корня страницы есть несколько триггеров действий.
Триггер действия — это обработчик события: нажатия кнопки, загрузки страницы, отправки формы, изменения данных. Он связывает событие с логикой, которую вы описываете. Подробнее — в разделе Редактор действий.
Открыв редактор действий для страницы, вы увидите такие триггеры.
On Page Load
Действия срабатывают при загрузке страницы: запрос к API, чтение из базы, подготовка переменных, обновление элементов интерфейса.
-
Готовят данные. Запрос к API, чтение из базы или локального хранилища — чтобы к моменту показа страницы данные уже были на месте.
-
Задают состояние. Если страница зависит от переключателей, выбранных значений или полей ввода, их начальные значения выставляют здесь.
-
Запускают анимацию. Например, чтобы обратить внимание на важный элемент экрана.
Как добавить действие в On Page Load:
Действия из On Page Load выполняются внутри SchedulerBinding.instance.addPostFrameCallback((_) — то есть после того, как дерево виджетов полностью построено. Подробности — в разделе Страница: сгенерированный код.
On Phone Shake
Действия срабатывают, когда пользователь встряхивает телефон.
- Показывают случайное. Случайное число, цитата, другая картинка на фоне.
- Обновляют данные. Свежие новости, перезагрузка ленты.
- Сбрасывают состояние. Очистка формы или возврат на главный экран.
On Shortcut Press
Триггер привязывает действия к сочетаниям клавиш. В веб- и десктопных приложениях это заметно ускоряет работу и помогает тем, кто не пользуется мышью.
- Быстрое создание записи. В таск-трекерах вроде Linear клавиша
Cоткрывает форму новой задачи. - Отправка формы. Например, по
Ctrl + Enter. - Переходы между страницами.
Ctrl + →листает страницы без мыши.
- Сочетание, заданное на уровне страницы, не сработает, пока фокус находится в поле ввода, — и набрать этот символ в поле тоже не получится.
- Сочетание на уровне компонента при фокусе в поле ввода тоже не сработает, но символ в поле наберётся.
- Чтобы не мешать вводу, выбирайте сочетания, а не одиночные буквы: Command + S вместо просто «S».
- Известная особенность Flutter: если у поля ввода внутри компонента включён автофокус, а у компонента есть сочетание клавиш, автофокус не сработает.
Сочетаний можно завести сколько угодно, каждое со своим набором действий. Разберём пример: в веб-магазине пользователь открывает корзину клавишей C.
Для этого добавьте триггер On Shortcut Press и укажите клавиши, которые приложение должно слушать.
Если на странице или в компоненте с полем ввода есть сочетания клавиш, поле должно их игнорировать.
Скажем, у вас есть сочетание на букву «C», и пользователь набирает «C» в поле поиска: нажатие должно попасть в текст, а не открыть корзину.
У виджета TextField для этого есть опция, отключающая обработку сочетаний. Но надёжнее с самого начала брать комбинации вроде Cmd + C, которые с обычным вводом не пересекаются.
On Dispose
On Dispose срабатывает, когда пользователь уходит со страницы и она выгружается из памяти. Это место для остановки того, что было запущено.
Представьте: при загрузке страницы через On Page Load начинается запись звука. Пока человек на странице, запись идёт. Стоит ему уйти — запись нужно остановить и корректно сохранить файл; этим и занимается On Dispose.
Если вы используете сторонний пакет с постоянными соединениями или слушателями, закройте их здесь же — через кастомные действия.
- Освобождают ресурсы. Отменяют таймеры, закрывают соединения с базой, отписываются от потоков — иначе утечки памяти и лишняя нагрузка.
- Пример: биржевое приложение держит WebSocket ради живых котировок. Соединение открывается при загрузке страницы и закрывается в On Dispose. Без этого оно останется висеть, расходуя ресурсы и расшатывая работу приложения.
- Завершают транзакции. Фиксируют или откатывают операцию, если пользователь ушёл, не закончив.
- Пишут аналитику. Отмечают уход со страницы и время, проведённое на ней.
:::
Состояние страницы
:::note[Переменные состояния] Переменная состояния хранит данные о том, в каком виде интерфейс находится прямо сейчас. Подробнее — в руководстве по управлению состоянием.
Состояние страницы (Page State) — это то, что страница знает о себе в текущий момент: какая вкладка открыта, что введено в форму, что выбрал пользователь. Такие переменные видны только в пределах своей страницы.
Сюда кладут данные, общие для виджетов одного экрана: содержимое формы, поисковый запрос, выбранные фильтры и порядок сортировки.
Например:
- в многошаговой форме переменная Page State хранит номер текущего шага и введённое на каждом шаге;
- на странице результатов поиска — сам запрос, а также применённые фильтры и сортировку.
Так страница сохраняет своё состояние, пока пользователь работает с её виджетами и компонентами.
Когда переменная меняется, страницу можно перерисовать — и она покажет обновлённые данные.
Создание переменной
Порядок действий:
При создании задаются три свойства:
-
Is List — переменная хранит список значений одного типа, а не одно значение.
-
Initial Field Value — начальное значение, с которым переменная появляется.
-
Nullable — переменная может быть пустой (null). Пригодится, когда данные необязательны и отсутствие значения — нормальное состояние.
Посмотрим на них применительно к переменной searchString из примера с поиском:
-
Is List выключено: строка поиска хранит один запрос, а не набор.
-
Начальное значение — пустая строка (""): при открытии страницы поле поиска пустое.
-
Nullable включено: пока пользователь ничего не искал, переменная равна null — по этому признаку видно, что поиска ещё не было.
Тип переменной Page State может быть примитивным — String, Integer, Boolean, Double — или сложным: Enum, Custom Data Type, Document. Обо всех типах — в разделе о представлении данных.
Чтение значения
Значение Page State доступно в любом месте текущей страницы: любой виджет может показать его в интерфейсе или использовать в логике.
Привязать значение виджета к переменной можно везде, где встречается вот такая иконка.
Действие Update Page State
Значение Page State меняется только действиями. Нужно обновить состояние по нажатию кнопки, вводу в форму или другому событию — добавьте действие Update Page State.
Перерисовка при обновлении
В настройках действия есть свойство Update Type:
Rebuild Current Page — перерисовать страницу, чтобы изменения появились в интерфейсе.
No Rebuild — обновить значение, не трогая интерфейс.
Если нужно перерисовать страницу, не меняя переменных, используйте действие Rebuild.
Каждая перестройка дерева виджетов тратит ресурсы. Слишком частые перерисовки бьют по отзывчивости интерфейса и по батарее, поэтому Rebuild стоит включать там, где он действительно нужен.
Что при этом происходит под капотом, описано в разделе о сгенерированном коде страницы.