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

Необходимые условия

Это руководство использует пример сгенерированного кода демо-приложения EcommerceFlow. Чтобы посмотреть сгенерированный код непосредственно, проверьте репозиторий на Github.

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

Структура папок

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/  ---//сгенерированные FF файлы
    - 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. Каждую созданную вами страницу в FlutterFlow будет сопровождать своя собственная папка, содержащая файл widget и соответствующий файл model. Общие компоненты размещаются в подпапках внутри components/.

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

assets/

Директория assets/ предназначена для хранения статических файлов, используемых вашим приложением, таких как изображения, шрифты и другие ресурсы. Эти файлы могут быть доступны в вашем коде через пути к ресурсам и будут упакованы с вашим приложением при сборке.

lib/

Директория lib/ содержит весь Dart-код, который приводит в движение ваше приложение Flutter. Здесь находится основная структура вашего приложения. Она организована в несколько подкаталогов для удержания кодовой базы в чистоте и удобном управлении:

actions/

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

Future addToWishlist(
    BuildContext context, {
        required String? productId}) async {
    // Добавить идентификатор продукта в объект «Избранное»
    FFAppState().addToLocalWishlist(productId!);
    FFAppState().update(() {});
}

auth/

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

backend/

Директория backend/ отвечает за обработку всей логики бэкенда и интеграций вашего приложения Flutter. Сюда входят запросы API, функции облачного назначения, взаимодействие с базами данных и управление схемами данных. Каждый подкаталог внутри backend/ служит определенной цели:

• api_requests/: Каталог api_requests/ отвечает за всю коммуникацию между вашим приложением и внешними службами через API. Он централизует и организует код для создания и управления HTTP-запросами и ответами.

• cloud_functions/: В этом каталоге хранятся функции, взаимодействующие с облачными службами, такими как функции Firebase Cloud Functions. Эти функции используются для операций, которые должны выполняться на стороне сервера, таких как сложные вычисления, обработка данных или отправка уведомлений.

• schema/: Каталог schema/ крайне важен для определения структуры данных, используемых в вашем приложении. Он содержит следующие подкаталоги и файлы:

  • enums/: Хранит перечисляемые типы, используемые в приложении.
  • structs/: Используются для представления пользовательских типов данных, таких как Адрес или Корзина.
  • 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

Файл main.dart служит входной точкой для вашего приложения Flutter. Он начинается с инициализации движка Flutter с помощью WidgetsFlutterBinding.ensureInitialized(). Затем он настраивает стратегию URL для веб-приложения, инициализирует FlutterFlowTheme и настраивает FFAppState для управления глобальным состоянием вашего приложения.

pubspec.yaml

Этот файл является файлом конфигурации вашего проекта Flutter. Он определяет зависимости, ресурсы и другие настройки проекта. Он также определяет, какие версии Dart и Flutter используются в вашем проекте, а также любые сторонние пакеты или плагины, от которых зависит ваше приложение.

Эта структура упрощает управление и масштабирование вашего приложения!