Перейти к основному содержимому

Структура директорий

Предварительные требования

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

При скачивании кода, сгенерированного в FlutterFlow, вы заметите множество дополнительных файлов и папок по сравнению с тем, что отображается в Code Viewer в 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/ ---// empty in this project
- 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 generated files
    - custom_functions.dart
    - flutter_flow_animations.dart
    - flutter_flow_....dart
    - nav/
- app_constants.dart
- app_state.dart
- index.dart
- main.dart
pubspec.yaml

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

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

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

assets/​

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

lib/​

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

actions/​

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

Future addToWishlist(
    BuildContext context, {
        required String? productId}) async {
    // Add productId to wishlist object
    FFAppState().addToLocalWishlist(productId!);
    FFAppState().update(() {});
}

auth/​

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

backend/​

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

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

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

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

    • enums/: Хранит типы перечислений, используемые в приложении.
    • structs/: Используются для представления пользовательских типов данных, таких как Address или Cart.
    • util/: Содержит вспомогательные функции, такие как firestore_util.dart и schema_util.dart.

custom_code/​

Пользовательские Actions и Custom Widgets, созданные разработчиком, хранятся в этой папке в соответствующих поддиректориях: custom_code/actions и custom_code/widgets.

flutter_flow/​

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

app_constants.dart​

Этот класс используется для хранения константных значений, применяемых во всем приложении.

app_state.dart​

Этот файл содержит класс FFAppState, который отвечает за управление глобальными App States, созданными разработчиком.

main.dart​

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

pubspec.yaml​

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

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