Страницы
Страница во FlutterFlow — это один экран приложения. Под капотом у неё Scaffold — базовый виджет Flutter, который задаёт каркас экрана: место под AppBar, тело страницы и прочие обязательные части.
Страница состоит из виджетов. Виджет считается добавленным на страницу тогда, когда он попал в её дерево виджетов (Widget Tree).
Дерево виджетов показывает, как элементы страницы вложены друг в друга. Подробности — в обзоре виджетов.
Маршрутизацию FlutterFlow настраивает сам: у каждой страницы есть свой адрес. Кроме того, страница принимает входные параметры и хранит переменные состояния.
Про Scaffold и элементы страницы — в отдельном руководстве Элементы страницы.
Создание страницы
Начать можно с чистого листа, взять шаблон или поручить работу ИИ — способ выбирают по ситуации.
При создании страницы FlutterFlow генерирует класс Widget и парный ему класс Model — их видно в просмотрщике кода. Что внутри Model, разобрано в разделе о сгенерированном коде.
Новые страницы создаются во вкладке Page Selector в меню навигации.
Пустая страница
Пустая страница — чистый холст: вёрстку вы собираете сами из виджетов и компонентов, ничего не разбирая за автором шаблона.
Порядок действий:
Страница из шаблона
FlutterFlow предлагает набор шаблонов под частые задачи. Такой шаблон даёт готовый каркас, который останется настроить под свой стиль: заменить тексты, поправить виджеты, подставить цвета.
Как взять шаблон:
Генерация в Designer
FlutterFlow Designer собирает страницу по описанию на обычном языке: он учитывает контекст проекта и подбирает подходящие виджеты. Быстрый способ начать с нуля или проверить идею.
Импорт кадра из Figma
Макет из Figma превращается в страницу через Import from Figma: вы даёте ссылку на кадр (Frame), а ИИ FlutterFlow разбирает дизайн и собирает по нему вёрстку.
Сначала подключите аккаунт Figma. Затем при создании страницы выберите Import from Figma, вставьте ссылку на кадр и нажмите Import.
FlutterFlow покажет превью выбранного кадра. Проверьте его и нажмите Generate — готовая страница появится в AI Generation History, откуда её можно посмотреть и добавить в проект.
SVG из кадров Figma пока не импортируются. Такие элементы придётся добавить в ресурсы проекта вручную после генерации либо заранее заменить в Figma на PNG или JPEG.