File Structure in Flutter!
Whenever we start a new project, the 1st thing we get in mind is how to structure our project. If an inappropriate decision is taken at this time, entire project will become messy!
There are many ways you can structure your project, but the best one has following traits:
- Clean and easy to understand
- Independent of other functionalities
Whichever project structure you use, don’t forget KISS (Keep It Simple, Stupid). Your project or file structure should be such that even if a complete beginner is viewing your code, he/she should understand the structure in least time.
Today I will show one of the most simple project structure that you can follow and also has the above mentioned traits!
Let’s take an example of chat app which has functionality for authentication, single chat and group chat. First thing to start with is to create a folder called
screens folder will now contain different folders based on our functionalities.
auth folder will contain all files and folder related to Authentication Functionality.
group_chat folder will contain files related to Group Chat functionality and similarly
single_chat folder will contain files related to Single Chat functionality
Now, inside any one functionality, we create a folder called
pages which will contain our major UI files related to the functionality. Inside
pages folder, we create files for our UI. Eg: Considering Authentication functionality, we create
registration_page.dart files inside
Now, there are usually some common widgets that we use in a functionality, for example, let’s say we are using a customized button in login and registration page. So for that, we create
widgets folder inside
auth folder and create
auth_button.dart file inside it.
Now, to maintain code, let’s say we are using BLoC pattern. Then we create a folder named
auth folder and all bloc files inside that folder.
Now, let’s say you need to implement API Calls, so you can create a folder called
lib folder. This folder will contain a file called
api_service.dart Now, this file will contain all the API Calls of your app and hence we won’t put it inside any functionality folders.
Usually we use some constants like Font Size or some String Literals which are same throughout the app. So for that, we can create a file named
constants.dart directly inside
lib folder independent of all functionalities.
In the same way, you might also have some Common Widgets throughout your app like Loader. For that, you can create folder named
widgets directly under
So in short, all the components that are common to all functionalities can be added directly under
Now, you can do the same for all your functionality folders.
Satisfaction to point 1: Clean and easy to understand
This folder structure as you can see is pretty clean and easy to understand as it doesn’t have much complexity. So even a beginner can view the code structure easily. Also, such easy project structure help us to trace the bug quickly and solve them.
Satisfaction to point 2: Independent of other functionalities
As you can see, each functionality has it’s own folder and hence they are totally independent of each other.
Satisfaction to point 3: Scalable
Let’s say now you wish to add any other functionality in our chat app, for example, you wish to have now a list of chats or a list of all the contacts of your friends, so you can simply create a new folder named
contact_list and create the same folder structure. Hence, you can say this project structure is scalable as adding new feature doesn’t require you to change the existing functionality files.
Hope you enjoyed this article!
If you loved it, you can Buy Me A Coffee!
Don’t stop, until you are breathing!💙
- Abhishek Doshi