Холст

Холст (Canvas) показывает экран выбранного устройства — телефона, планшета, веб-страницы или десктопа. Виджеты переносятся на него перетаскиванием, выделяются, двигаются и ставятся туда, где им место.

Здесь же — управление масштабом, переключение светлой и тёмной темы, предпросмотр на разных языках, панели App Bar и Nav Bar, эмуляция крупного шрифта и другие проверки, которые иначе пришлось бы делать запуском приложения.

Показать или скрыть меню навигации

Кнопка открывает и закрывает меню навигации. Когда экран небольшой, свёрнутое меню возвращает холсту заметную часть ширины.

Управление масштабом

Кнопки (+) и (−) меняют масштаб холста. На сложной вёрстке это рабочий инструмент: приблизиться к участку, где виджеты стоят вплотную, и отдалиться, чтобы оценить экран целиком.

Рядом с ними — переключатель Fit device to canvas: он подбирает масштаб так, чтобы устройство целиком помещалось на холсте. Пока он включён, вместо процентов написано Fit, и устройство остаётся вписанным, когда вы меняете модель, ориентацию, положение складного экрана или размер окна. Повторное нажатие выключает режим.

Экран предпросмотра

Экран предпросмотра — то место, где собирается интерфейс для выбранного устройства. Виджеты переносятся на него из палитры виджетов, а настраиваются в панели свойств.

Размер экрана предпросмотра

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

В меню есть:

• Search devices… — поиск по списку. Каждое введённое слово должно совпасть с названием, брендом, годом или размером, поэтому pixel 9 pro оставит только подходящие Pixel. По списку можно ходить стрелками.
• Frequently used — устройства, которые вы выбираете чаще всего. Убрать устройство отсюда можно кнопкой удаления при наведении; в своей категории оно останется.
• Phones, Foldables, Tablets и Desktop — устройства по типам, новые сверху. Среди них свежие iPhone, Pixel, складные Galaxy и iPhone Duo.
• Custom size (px) — произвольный размер: введите ширину и высоту и нажмите Apply.

Рядом с выбором устройства:

• Rotate to landscape / Rotate to portrait — поворот превью. Для десктопных устройств и при редактировании компонента недоступен.
• Closed, Half-open и Open — состояния складного устройства: сложено, полураскрыто, раскрыто. Half-open появляется, только если внешне отличается от Open, как у iPhone Duo.

Рамка устройства показывает боковые кнопки, вырез камеры и безопасные зоны. У произвольного размера рамки нет.

Добавить App Bar

Кнопка добавляет на страницу App Bar. По нажатию открывается окно с вариантами оформления: выберите подходящий, и он появится на экране предпросмотра.

Скриншот превью

Значок камеры Save Screenshot рядом с экраном предпросмотра сохраняет картинку того, что сейчас на превью.

Обмен с FlutterFlow Designer

Через это меню экраны переносятся между FlutterFlow и FlutterFlow Designer.

• Export to Designer — отправить страницы проекта в Designer, чтобы поработать над стилем и вёрсткой там. Инструкция — Импорт из FlutterFlow.
• Paste from Designer — забрать макеты из Designer в проект. В Designer выберите Export to FlutterFlow, скопируйте фреймы, затем на холсте нажмите Paste from Designer. Подробности — Экспорт из Designer.

Тёмная и светлая тема

Переключатель показывает превью приложения в светлой и тёмной теме — проверить, что дизайн работает в обеих. Доступен, если в проекте включена поддержка тёмной темы.

Настройки конструктора

Builder Settings определяют, как ведут себя сам конструктор, холст, экран предпросмотра и панель свойств во время работы.

Настройки платформы

Тёмная тема конструктора

Переключает светлую и тёмную тему самого FlutterFlow. Это оформление платформы, а не тема вашего приложения.

Настройки холста

Привязка размеров

С включённой привязкой (Enable Snapping) ширина и высота виджета при изменении размера меняются шагами заданной величины. Размеры перестают разъезжаться на пиксель-другой, а вёрстка остаётся кратной сетке.

Ручки изменения размера

Опция Show Resize Bars добавляет ручки справа и снизу от экрана предпросмотра. Ими экран растягивают до произвольного размера и смотрят, как вёрстка отзывается на каждую ширину.

Цвет холста

Меняет цвет фона под превью. Полезно при работе с компонентами и отдельными виджетами: например, компонент с тёмным текстом на тёмном фоне холста разглядеть трудно, а на светлом — видно всё.

Настройки предпросмотра устройства

Безопасная зона

Показывает на превью безопасную зону устройства — границы, за которыми контент перекрывают вырез камеры, скруглённые углы, строка состояния и прочие элементы экрана.

Масштаб текста

Показывает приложение с разным масштабом шрифта. Так проверяют, что интерфейс не рассыпается, когда пользователь увеличил текст в настройках доступности своего телефона.

Клавиатура

Показывает на превью экранную клавиатуру. Нужна, чтобы увидеть, что происходит с полями формы, кнопками и прижатым к низу контентом, когда клавиатура открыта.

Рамка устройства

Добавляет вокруг превью корпус устройства. Удобно для проверки того, как экран уживается с особенностями конкретных моделей — безопасной зоной и вырезами на iPhone и Android.

Системный интерфейс

Показывает внутри рамки устройства строку состояния и панель навигации. Они берут цвет из App Bar страницы и подстраиваются под светлую или тёмную тему превью.

Пункт доступен только в режиме страницы, при включённой Display Device Bezel и выбранном готовом устройстве, например iPhone. По умолчанию Show System UI выключен.

Переполнения

Показывает ошибки переполнения прямо в конструкторе — в том же виде, в каком они появятся в Test Mode. Проблемы вёрстки видно до запуска приложения.

Язык предпросмотра

Если в проекте включена поддержка нескольких языков, здесь выбирают, на каком показывать интерфейс. Откройте Canvas Settings и смените Display Language — переводы подставятся в превью.

Настройки панели свойств

Свёрнутые общие свойства

С этой опцией частые разделы панели свойств — Visibility, Padding, Alignment — по умолчанию свёрнуты. Панель становится короче, и вы открываете только то, что собираетесь править.

Добавить Nav Bar

Кнопка добавляет на страницу Nav Bar. По нажатию открывается окно, где панель включается для всего проекта; дальше её оформление настраивается под ваш дизайн.

Видео

Если удобнее посмотреть, а не прочитать: