Directory Structure

When you download the code created by FlutterFlow, you'll find lots of files and folders that might look different from what you see in FlutterFlow's Code Viewer. These files make up the complete project structure, and we organize them in our unique way. Understanding this structure is like having a handy map to help you navigate through your code. It's your tool for confidently exploring and customizing your FlutterFlow project later. So, let's dive in and demystify 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
    - cloud_functions/
    - firebase/
    - supabase/
    - schema
        - enums/enums.dart
        - structs/
        - util/
- pages/
    - page1/
        - page1_model.dart
        - page1_widget.dart
    - page2/
        - ...
- components/
    - custom_component1_model.dart
    - custom_component1_widget.dart
    - custom_component2_model.dart
    - custom_component2_widget.dart
- flutter_flow/ ----> FF generated files
    - custom_functions.dart
    - flutter_flow_animations.dart 
    - flutter_flow_....dart
    - nav/
main.dart
app_constants.dart
app_state.dart
pubspec.yaml

FlutterFlow follows a layer-first approach to keep your app organized as it grows. We neatly organize authentication and backend methods in their own sections. Each page gets its folder, and shared components are placed in subfolders under components/.

If you've created nested folders in your widget tree, these will directly match the exported code folders. This gives you even more control to group and organize different features as you like. For instance, you could have separate folders for onboarding, user account UI, and payment processes.

This structure makes managing and scaling your app a breeze!

Same thing goes for folders of components.

Additionally, there's a special flutter_flow directory under lib for FlutterFlow-generated files such as custom_functions.dart and various FlutterFlow utilities.