# Here is how we manage Flutter project and file architecture at JoFlee

#### Flutter is most useful in cross-platform technology. Each and every company or individual developer has either created their own way to manage code or just using someone else's patten. We found that file structure is most important for scalability of the project. 

Here are the commonly raised concerns for not using good architecture.
- Unable to find the specific file project
- Code Maintaining Problem
- Big Problem in Teamwork
- Developers start blaming each other or older developer for even minor change in requirement

#### Everyone has their own architecture. No one is wrong at all.
  
  This is what I suggest and use in our existing projects having 10 people working on the same.

#### Best naming pattern for folder and file 	
	
1. homeScreen (Camel Case) - suitable for folder name 
2. home_screen.dart (Lower case for all word) - suitable for file name 


## Asset
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664687489233/AhoPAv7cG.png align="left")
We can store static asset e.g. app logo, app icon, pdf, video, font and svg file in Assets folder

## Lib
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664687989346/dQpM6s5Xl.png align="left")
Store all dart file in Library 
	In Lib folder we can create 2 main folders core and module

### Core
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664694232955/nVl55l0M1.png align="left")
    In core folder we can create common, constant, enum,  serverCommunicator, storage, theme, validator folder etc.

#### Common
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664690824037/bXGRUQqeN.png align="left")
      In Common folder we can store common widget, screen, function, model and more functionality used more then once 

#### Constant
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664691177488/64IEUevhV.png align="left")
    In Constant folder we can store all strings used and our app, api string and asset and network image link

#### Enum
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664691457208/yh8FzUIxS.png align="left")
  We can store all enums in this folder 

#### Server Communicator
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664691590698/i29l2GKhT.png align="left")
 In Server Communicator file we can store any network services functionality e.g. HTTP service, Dio Service, Firebase Service and any type of network service
 
#### Storage
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664691804068/8BhA8t5s9.png align="left")
  
In Storage folder we can create Local Data Base files and Shared Preferences

#### Theme 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664692096988/sSJqyVJr3.png align="left")

In Theme folder we can Store theme related functionality e.g. separate color file, light and dark theme functionality 

#### Validator
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664692232694/fqlpcV-tM.png align="left")
We can store all form validators in this folder 

### Modules
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664692784753/T0NN8WPcQ.png align="left")
We can create our main modules folder in Modules e.g. auth, dashboard and splash...

#### Auth
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664693965318/IZrijaflZ.png align="left")
We can store authentication related data e.g. login, sign-up, forgot password and onboarded screen 

#### Dashboard
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664693584824/ZS88wACvS.png align="left")

We can store all screen and functionality in dashboard module

#### Splash
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664693808203/AUOs5wEtI.png align="left")
In this folder we can store splash time data loading functionality and splash screen related data 

##### Login
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664694349228/rsQEMRj6v.png align="left")

In Login Module and same as all basic module we can participant in section first controller second Model and third view
1. Controller 
    In Controller section we can store all login functionality
2. Model
    In Model section we can store login module
3. View 
    In View section we can divide in 2 part first one is screen and second one is widget
    a. In screen section we can create screen UI
    b. In Widget section we can store all widget using in screen 


## Our Full Folder Architecture 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664694893690/SLGYyy6v-.png align="left")