---
# System prepended metadata

title: Folder Structure

---

# Folder Structure
```
|-app
|-common
|---extensions
|---helpers
|---error
|---ui
|-----widgets
|-----functions
|-constants
|-datamodels
|---api_models
|---models
|-repository
|-services
|-theme
|-features

```
1.  `app` directory
    The app directory contains the files that are used through out the app. Some of the files that it may contain are `app.dart` which houses the core functionality of the application including the dependency injection, routing, logging e.t.c. The files that are using in our app are `app.locator.dart`, `app.logger.dart`, `app.router.dart` e.t.c.
    Since the `app.dart` file will hold all the dependency registration and routes registration, this file may be very big and difficult to navigate. To help us navigate much better, we have seperated the dependencies and routes registration to seperate files using `part` and `part of`.

2.  `common` directory
    This directory contains the common helper methods, widgets that are not related to any views and can be used anywhere, ui helpers that are useful for doing the ui, error classes, helpers methods and dart extensions.
    Some of the folders that are listed in the directory tree are not implemented in our project. We can easily refer to the structure in this document and extend the directory. - `extensions` directory
    This directory will hold all the dart extensions that are being used in the project. So that if will be easier for us to import from a single location. - `helpers` directory
    This directory will hold the helper methods like validation, password hashing and so on. This directory are for those helper methods that are not used to build ui. - `error` directory
    This directory is for registering the custom error object. In out case its `NetworkFailure`. This can also include the functions and callbacks which will be invoked whenever an error has occured. - `ui` directory
    This directory will hold all the common ui related code. - `functions` directory
    In this directory we will add the helper methods that are related to ui. For example like screen responsibe helpers, empty space returing functions and so on. - `widgets` directory
    This directory will hold all the widgets that are used throughout the apps and that are not related to only a single view. For example custom made input form field, custom made button, custom made popup and so on.

3.  `constants` directory
    This directory contains the files that holds the constants and when changed, affects the entire application.
4.  `datamodels` directory
    This directory contains the data models that are used to serialize and deserialize the JSON response from the API. These models are immutable and are mainly used for serialization and deserialization purposes. - `api_models` directory
    This folder only stores those models that only represend the data response from and to the api. This can also be called as data transfer objects. For example this can store `login_response_model.dart`. Here in this response model, we may get the details of the user. This user details will be the field in this response model. - `models` directory
    This directory contains those models that can be or cannot be used in the `api_models` directory. For example this directory will contain `user_model.dart` containing a class `UserModel`. Here this `UserModel` will be used in `LoginResponseModel` class for serialization and deserialization.

    We will be using [json_serializable](https://pub.dev/packages/json_serializable) package to generate serialize and deserialize the models.

    > To run the generator to generate the codes that are required for serialization and deserialization use `flutter pub run build_runner watch`. This will run the build runner in watch mode and re-generate the codes once it detects the changes.

    > If we just want to get the code and dont want it to watch the changes, we can instead run this command `flutter pub run build_runner build`.

    > If the `build_runner` shows error related to files conflict then use `--delete-conflicting-outputs` to delete the conflicting outputs

5.  `repository` directory
    This directory contains the classes which act as the data source which consumes the services and returns the data. The files in this directory are injected with the services and they use services to get and send data. The repositories can be seperated based on the feature and it is better to have different repository for each feature.

6.  `services` directory
    This directory contains the files that do a single purpose job. For example a camera service is responsible for opening the camera, capturing a picture, getting information of that picture, and so on.
    The services are used inside the viewemodels, repository and so on.

7.  `themes` directory
    The `themes` directory contains the files that are used to set multiple themes for the application. This directory may also include the files that are related to the global style like typography, decorations e.t.c.

8.  `features` directory
    This directory contains all the feature, for example `auth`, `home`, `profile` e.t.c. Each of feature contains the ui, widgets and viewmodels that are related only to this feature and are not related to any of the other features.

---