Directory Structure

Prerequisites

This guide uses example of the generated code of the EcommerceFlow demo app. To view the generated code directly, check out the Github repository.

When you download the code generated by FlutterFlow, you'll notice many additional files and folders beyond what you see in FlutterFlow's Code Viewer. These files make up the complete project structure, organized according to a specific architecture. Understanding this structure is like having a detailed map, guiding you through the code and making it easier to navigate and customize your FlutterFlow project later. So, let's dive in and explore this directory structure.

Folder Structure

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

Pages & Components

FlutterFlow follows a layer-first approach to keep your app organized as it grows. Authentication and backend methods are neatly organized into their own sections auth and backend. Each page you create in FlutterFlow will generate its own folder, containing the widget file and the corresponding model file. Shared components are placed in subfolders under components/.

If you've created nested folders in the FlutterFlow UI, these will directly translate into corresponding folders in the exported code. This gives you even more control to group and organize different features as you like. For instance, you could have separate folders for products, user profile, and orders. In the example above, cart is a folder explicitly created to hold all cart related pages and components.

assets/

The assets/ directory is where you store static files that your app uses, such as images, fonts, and other resources. These files can be accessed in your code through asset paths and are bundled with your app when it's built.

lib/

The lib/ directory contains all the Dart code that drives your Flutter app. This is where the main structure of your application resides. It's organized into several subdirectories to keep the codebase clean and manageable:

actions/

The actions folder contains app-level Action Blocks. Each Action Block is created as a separate function within this directory. For example, in the case of eCommerce demo app, the addToWishlist function is an app-level Action Block that is included in the actions.dart file.

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

auth/

Contains files and folders related to authentication logic, including integrations with Firebase or other authentication services.

backend/

The backend/ directory is responsible for handling all the backend logic and integrations for your Flutter app. This includes API requests, cloud functions, database interactions, and managing data schemas. Each subdirectory within backend/ serves a specific purpose:

• api_requests/: The api_requests/ directory handles all communication between your app and external services via APIs. It centralizes and organizes the code for making and managing HTTP requests and responses.

• cloud_functions/: This directory is used to store functions that interact with cloud-based services, such as Firebase Cloud Functions. These functions are used for operations that need to be performed on the server side, such as complex calculations, data processing, or sending notifications.

• schema/: The schema/ directory is crucial for defining the structure of data used throughout your app. It contains the following subdirectories and files:

  • enums/: Stores enumeration types used across the app.
  • structs/: These are used to represent custom data types like Address or Cart.
  • util/: Contains utility functions like firestore_util.dart and schema_util.dart.

custom_code/

Custom Actions and Custom Widgets created by the developer are stored in this folder, in their respective subdirectories: custom_code/actions and custom_code/widgets.

flutter_flow/

This directory is generated by FlutterFlow and contains various utility files that support the app's operation, such as custom functions, generated themes, navigation and more.

app_constants.dart

This class is used to store constant values that are used throughout the application.

app_state.dart

This file contains the FFAppState class, which is responsible for managing the global App States created by the developer.

main.dart

The main.dart file serves as the entry point for your Flutter application. It begins by initializing the Flutter engine with WidgetsFlutterBinding.ensureInitialized(). Next, it sets up the URL strategy for the web application, initializes the FlutterFlowTheme, and sets up the FFAppState to manage the global state of your app.

pubspec.yaml

This file is the configuration file for your Flutter project. It defines the dependencies, assets, and other project settings. It also specifies which versions of Dart and Flutter your project uses, along with any third-party packages or plugins your app relies on.

This structure makes it easier to manage and scale your app!