Структура каталогов

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

Дерево проекта

assets/
lib/
- actions/actions.dart
- auth/
    - firebase_auth/
    - auth_manager.dart
    - base_auth_user_provider.dart
- backend/
    - api_requests/
        - api_calls.dart
        - api_manager.dart
        - get_streamed_response.dart
    - cloud_functions/
    - firebase/
    - firebase_dynamic_links/firebase_dynamic_links.dart
    - supabase/
    - schema/
        - enums/enums.dart
        - structs/
            - address_struct.dart
            - cart_struct.dart
            - ...
        - util/
            - firestore_util.dart
            - schema_util.dart
        - carts_record.dart
        - ...
        - index.dart
    - backend.dart
- pages/ ---// в этом проекте пусто
- cart/
    - cart_counter/
        - cart_counter_model.dart
        - cart_counter_widget.dart
    ...
- components/
    - square_leading_model.dart
    - square_leading_widget.dart
    - styled_button_model.dart
    - styled_button_widget.dart
- custom_code/
    - actions/
        - execute_search.dart
        ...
- flutter_flow/  ---// файлы, сгенерированные FlutterFlow
    - custom_functions.dart
    - flutter_flow_animations.dart
    - flutter_flow_....dart
    - nav/
- app_constants.dart
- app_state.dart
- index.dart
- main.dart
pubspec.yaml

Страницы и компоненты

FlutterFlow раскладывает код по слоям. Авторизация и работа с бэкендом вынесены в auth и backend. Каждая страница получает свою папку с файлами widget и model, общие компоненты лежат в подпапках components/.

Папки, созданные в интерфейсе FlutterFlow, превращаются в папки в коде — так что группировать по возможностям (products, user profile, orders) можно прямо в редакторе. В примере выше cart — как раз такая папка: в ней всё, что относится к корзине.

assets/

Статические файлы приложения: изображения, шрифты и прочие ресурсы. В коде к ним обращаются по путям, а при сборке они упаковываются вместе с приложением.

lib/

Весь код приложения на Dart. Разбит на подпапки, чтобы не превращаться в свалку.

actions/

Блоки действий уровня приложения. Каждый блок — отдельная функция. В демонстрационном магазине это, например, addToWishlist в файле actions.dart:

Future addToWishlist(
    BuildContext context, {
        required String? productId}) async {
    // добавляем productId в список желаний
    FFAppState().addToLocalWishlist(productId!);
    FFAppState().update(() {});
}

auth/

Всё, что относится к авторизации, включая интеграцию с Firebase и другими сервисами.

backend/

Работа с бэкендом: запросы к API, облачные функции, база данных и описание структур данных.

• api_requests/ — обмен с внешними сервисами по HTTP: сами вызовы, их выполнение и разбор ответов.
• cloud_functions/ — обращения к облачным функциям, например Firebase Cloud Functions: то, что должно считаться на сервере.
• schema/ — описание структуры данных приложения:
  • enums/ — перечисления;
  • structs/ — собственные типы данных вроде Address и Cart;
  • util/ — вспомогательные функции, firestore_util.dart и schema_util.dart.

custom_code/

Собственные действия и виджеты — в подпапках custom_code/actions и custom_code/widgets.

flutter_flow/

Служебные файлы, которые генерирует FlutterFlow: собственные функции, темы, навигация и прочее.

app_constants.dart

Константы, используемые по всему приложению.

app_state.dart

Класс FFAppState — глобальное состояние приложения, заданное разработчиком.

main.dart

Точка входа. Инициализирует движок Flutter через WidgetsFlutterBinding.ensureInitialized(), настраивает работу с адресами для веб-версии, поднимает FlutterFlowTheme и FFAppState.

pubspec.yaml

Конфигурация проекта Flutter: зависимости, ресурсы, версии Dart и Flutter, сторонние пакеты и плагины.