Холст

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

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

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

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

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

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

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

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

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

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

Можно задать и произвольный размер: нажмите на поле с текущим размером, укажите Width (px) и Height (px) и нажмите Save.

Добавить App Bar

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

Обмен с 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.

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

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

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

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

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

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

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

Добавить Nav Bar

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

Видео

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