Строительные блоки интерфейса

Интерфейс во FlutterFlow устроен так же, как его описывает атомарный дизайн — методология, которая раскладывает UI по уровням сложности.

Начинается всё с «атомов» — неделимых элементов. Из них складываются «молекулы», из молекул — «организмы», то есть законченные функциональные блоки. Такая иерархия удобна не сама по себе: она подсказывает, что стоит делать переиспользуемым, а что останется на своей единственной странице.

Как это выглядит во FlutterFlow — от простого к сложному:

• Атомы
  • Базовые элементы, из которых состоит всё остальное.
  • Например: TextField, Button, Icon.
• Молекулы
  • Несколько атомов, связанных вместе; наименьшая осмысленная единица, которую уже можно использовать саму по себе.
  • Например: EmailSignInField — поле ввода TextField плюс иконка Icon.
• Организмы
  • Группы молекул, образующие заметную самостоятельную часть интерфейса.
  • Например: LoginComponent — молекула EmailSignInField, похожая на неё PasswordSignInField и атом SubmitButton.
• Страницы
  • Целые экраны — то, что в итоге видит пользователь. Собираются из всего перечисленного вместе с логикой и оформлением.
  • Например: SignInPage.

Посмотрим, во что это превращается на практике, когда вы создаёте первый проект.

Страницы

Страница во FlutterFlow — отдельный экран приложения: набор элементов интерфейса, собранных в законченный вид. В новом проекте на холсте сразу лежит пустая страница HomePage.

Набор страниц задаёт маршрут пользователя по приложению. В демонстрационном магазине после входа человек попадает на ProductListPage, а нижняя панель навигации уводит его на ProfilePage и другие экраны.

Виджеты

Страница почти всегда состоит из виджетов и компонентов.

Виджеты — те самые атомарные элементы. Каждый из них можно считать атомом или молекулой в зависимости от того, может ли он содержать другие виджеты: TextField дочерних элементов не принимает, а Column и Row — принимают.

Компоненты

В терминах атомарного дизайна компоненты FlutterFlow — это «организмы»: они собираются из виджетов и образуют законченную часть интерфейса.

Смысл компонента — в переиспользовании. Один раз собранный блок вставляется на разные экраны и в разные проекты, сохраняя и поведение, и оформление.

Классы и экземпляры

Добавляя элемент на страницу, вы пользуетесь классом виджета и создаёте его экземпляр.

Icon — это класс виджета. Каждый раз, когда вы ставите иконку в разных местах приложения, создаётся экземпляр этого класса со своими значениями свойств.

Класс удобно представлять как шаблон: он описывает устройство и возможности того, что вы собираетесь создавать не один раз. В демонстрационном приложении EcommerceFlow есть компонент ProductListCard с картинкой, текстом о товаре и действием по нажатию, — это и есть класс.

Каждая вставка ProductListCard на страницу — уже экземпляр. На ProductListPage это экземпляр topSellingProductCard для блока с хитами продаж, на CategoryProductListPage — categoryProductCard.

Экземпляры можно настраивать по-разному — менять данные и действия, — но все они происходят от одного шаблона. Значит, ProductListCard достаточно нарисовать один раз, а дальше подстраивать под место применения.