Flutter file structure & organize folders effectively

To follow proper file structure is very much needed whether it is a small or big project. In this blog, We will be covering how we can maintain file structure by doing small changes.

Default file Structure

As we can see flutter provides default folders but as a developer, we heavily work under the lib folder. Which is the heart of our mobile application.

As the project progresses day by day, we add more and more files in this folder and we will need to manage all the files accordingly. Below is the image of how we can properly structure our lib folder and also we can handle images and fonts that we added for our project.

Structured lib folder

Below is a detailed explanation of different folders in lib.

General Overview…

1. Generally, we follow the proper naming convention for any type of coding language. Flutter also provides Guide for naming Conventions. in this project, we also followed the same.
2. Also, the flutter team prefers small letter filename having _(underscore) in between for creating different libraries.
3. In this project, we have created different folders according to our requirements which are explained here.

Folders

1. Model:

Apis is a crucial part of any mobile application. One application can contain more than 10 APIs. So in order to manage all the responses here, we have created a folder named model which will contain dart generated response. We need to convert the response to dart compatible. You can do it here.

2. Screens:

Generally, mobile applications have the flow of screens which are interlinked with each other. Big projects could have more than 20 screens. To manage all screens here we have created a folder called screens and added all the necessary screens.

3. Values:

This folder has four types of folder:

• appAssets: This folder contains paths for different images and all other assets.
• app colors: Every project has multiple colors including text, background, etc. But what if the client wants to update the app’s color. Then, we are not going to change every file where it is used. That’s why in-app colors file we initialize the different color variations.
• appDimens: Flutter project could contain so many static and reusable values I.e padding, margin, text size, icon size values, etc. To avoid that we are making appDimens files so that we can update each value easily. We can also get device types whether it is a tablet or phone.
• utility: In this file, we could add static widgets and methods which work the same in the whole mobile application. I.e progress bar widget, platform permissions method, etc.

4. Widgets:

As shown in the image back_arrow_widget includes the “Appbar’s back arrow” which will have to take icon and onTap functions as parameters. Because of that, we will have the benefit of dynamic code and less code complexity.

5. Assets

To maintain the different assets here we have created individual types of folders.

Fonts and Images folder:

As we can see from the above image we can categorize different types of assets into particular folders.

Conclusion:

Here, I have explained what is the best approach to maintaining the whole flutter project based on my knowledge and deep-dive research. Happy coding…..