Устройство проекта FlutterFlow

Эта страница разбирает, из чего собран типичный проект FlutterFlow — от проекта целиком до отдельного элемента оформления, — и что каждая из этих сущностей означает в терминах обычного Flutter-приложения.

Из чего состоит приложение

Схема ниже показывает структуру приложения на FlutterFlow.

1. Project (проект) — приложение целиком. Он вмещает всё перечисленное ниже и служит контейнером для всей работы над приложением во FlutterFlow. О том, как создать проект, читайте здесь.
2. Page (страница) — отдельный экран проекта. Каждая страница — это часть интерфейса, с которой работает пользователь; вместе они и составляют приложение. Подробности о страницах — здесь.
3. Built-in widgets (встроенные виджеты) — готовые виджеты FlutterFlow, из которых собирается интерфейс: кнопки, поля ввода, слайдеры и прочие привычные элементы.
4. Component (компонент) — переиспользуемый блок интерфейса, который вставляется на разные страницы проекта. Компоненты держат оформление единым и избавляют от копирования: один и тот же диалог достаточно собрать однажды. Как создать компонент, описано здесь.
5. Design System (дизайн-система) — набор правил оформления проекта: заранее заданные стили, за счёт которых приложение выглядит цельным. Подробнее о дизайн-системе — здесь.

Как это соотносится с Flutter

Если вы пришли из Flutter, полезно один раз сопоставить знакомые сущности с тем, как они называются во FlutterFlow. Схема ниже показывает это соответствие.

1. MyApp → Project. В Flutter MyApp — корень приложения, где описываются маршруты и общие настройки. Во FlutterFlow эту роль играет «Project»: приложение целиком вместе со своими конфигурациями и настройками. Подробнее о создании проекта — здесь.
2. MyPage → Page. MyPage во Flutter — конкретный экран. Во FlutterFlow «Page» — тот же экран, на котором вы собираете вёрстку и логику этой части приложения. Подробнее о страницах — здесь.
3. Column, Button, Text → Built-in widgets. Во FlutterFlow эти виджеты собраны в категорию «Built-in widgets», откуда их перетаскивают на холст. Подробнее о виджетах — здесь.
4. Custom widget → Component. CustomWidget во Flutter — собственный виджет для того, чего нет среди стандартных. Во FlutterFlow ему соответствует «Component»: свои компоненты создаются и переиспользуются внутри проекта. Подробнее — здесь.
5. Theme/style constants → Design System. Во Flutter за единство оформления отвечают темы и константы стилей. Во FlutterFlow ту же задачу решает «Design System». Подробнее — здесь.

Описания ресурсов

Описание ресурса (Resource Description) — короткая заметка о том, зачем нужен элемент проекта, как он работает или что в нём важно. Такие заметки превращают проект в документированный: и вам через полгода, и коллеге сегодня понятно, что здесь происходит, без чтения всей логики.

Описание можно добавить к каждому из этих ресурсов:

• Project — общая цель или охват приложения. Например, «Приложение для управления доставкой в небольшом бизнесе»: команда держит в голове главную задачу.
• Page — назначение страницы. Пример: «Корзина пользователя и оформление заказа».
• Component — что делает переиспользуемый компонент. Пример: «Карточка-обёртка для использования в качестве ListTile».
• Action Blocks — что делает набор действий. Пример: «Отправляет уведомление на почту пользователя после отправки формы».
• Custom Functions — логика или смысл функции. Пример: «Считает стоимость доставки по весу и расстоянию».
• Custom Actions — поведение, которое вы описали кодом. Пример: «Открывает сканер QR-кода и возвращает считанное значение».
• Custom Widgets — назначение или устройство виджета. Пример: «Карусель изображений с индикатором страниц».
• Data Type — смысл собственной модели данных. Пример: «Заказ пользователя: товары, сумма и статус».
• Parameters — как используется параметр, какого типа и в каких пределах значение. Пример: «Строка с номером телефона — обязательно с кодом страны».
• Page/Component State Variables — что за состояние хранится и зачем. Пример: «Текущая выбранная вкладка этого компонента».
• App State Variables — глобальные данные, общие для всех страниц. Пример: «Токен авторизации пользователя для всех сетевых запросов».
• Constant — назначение фиксированного значения. Пример: «Базовый URL API для всех запросов».
• Enum — смысл перечисления. Пример: «Роли пользователей: admin, editor, viewer».
• Firestore Collection — что хранит коллекция и как связана с приложением. Пример: «Профили пользователей: имя, почта, ссылка на фото».

Во FlutterFlow описание читается как подсказка при наведении на зелёную иконку с заметкой.

```jsx
/// Заказ пользователя: товары, сумма и статус.
class OrderInfo {
/// Итоговая стоимость заказа в USD.
double totalAmount;
List<String> items;
// ...
}
```