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
- Scalable
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 inside lib
This 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 login_page.dart and registration_page.dart files inside pages folder
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_bloc inside 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 services inside 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 lib folder.
So in short, all the components that are common to all functionalities can be added directly under lib folder.
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 chat_list or 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.
Don’t stop, until you are breathing!💙
- Abhishek Doshi
