В FlutterFlow вы можете создавать и настраивать свое приложение на странице Конструктор пользовательского интерфейса. Эта страница состоит из всех элементов пользовательского интерфейса (также известных как виджеты), которые вы можете использовать для создания макета вашего приложения.

UI-Builder-New

В FlutterFlow нет полос прокрутки. Вместо этого просто наведите курсор на раздел и прокрутите его, как вы обычно делаете это с помощью мыши или трекпада.

Чтобы вы могли ознакомиться со страницей Конструктора пользовательского интерфейса, мы разделили ее на четыре основных раздела.

1. Область рабочего пространства

Область холста отображает экран мобильного устройства, на который можно добавлять элементы, перетаскивая их на холст. Область холста позволяет увидеть сочетания клавиш, показать или скрыть рамку устройства и экранную клавиатуру. Вы также можете настроить уровень масштабирования и изменить размер экрана устройства, чтобы проверить отзывчивость вашего приложения. При включении поддержки мультиязычности и темного режима в области холста также появляется возможность изменить язык и тему (темный/светлый режим) вашего приложения.

2. Панель виджетов

На панели виджетов вы найдете все элементы пользовательского интерфейса или компоненты. Их можно добавить на холст с помощью метода перетаскивания. Также имеется строка поиска для быстрого поиска любого виджета.

3. Панель свойств

Панель свойств позволяет настроить выбранный виджет, изменив такие свойства, как видимость, отступы, выравнивание и различные специфические свойства виджета (например, текст метки виджета текстового поля). Вы также можете открыть некоторые другие вкладки для указания действий (например, onTap и onSubmit), установки типа запроса (для любого вызова API или ссылки на документ Firebase) и добавления анимации к выбранному виджету.

4. Панель инструментов

Панель инструментов содержит полезную информацию, например, размер холста и кнопку «Проблемы проекта«, которая отображает любые проблемы, вызванные макетом или конфигурацией проекта. Здесь же вы найдете кнопки для сохранения текущей версии приложения и тестирования всего приложения путем его запуска или предварительного просмотра. Вы также можете просмотреть/скачать Dart-код приложения из меню разработчика. Кнопка «Добавить страницу» позволяет быстро добавить новую страницу в ваше приложение.