Production level Flutter project structure for a super app (WeChat clone)
I am challenging my self by taking a challenge to develop a production grade complete WeChat clone app in Flutter.
The app will have a lot of features, so it needs to be structured in a clean and organized way which makes a team of developers to work easily. In addition to this adding new features will be easy.
The objective of the project structure is to make it readable, maintainable, scalable and give separation of concern among the different concerns of the app.
I have decided to use Bloc pattern which is good for reactive programming and allows for clear separation of the data, business logic and presentation concerns of the app.
I have started my project by reading materials on project structure best practices and here is what I have came up after reading about a dozen articles and examples.
Here is the top level folder structure of my project.
Organizing assets
The assets folders is used to store static assets and files such as images, audios, json files etc. I have clearly structured the assets folder as follows.
The assets folder will be used to store different fonts , html files, internationalization files and images.
Organizing code
The main application code will be in the lib folder which is a default flutter project structure. I have decided to structure the lib folder as follows.
Config folder keeps app configurations like routing and theming (light and dark mode ).
Constant folder keeps constant variables and their values, these constants are used throughout the app and they should be kept centrally in one place to avoid duplication everywhere.
Core folder is a code folder that keeps authentication and user setting management code.
Modules folder is similar to core but for each separate feature like timeline, chat, payment etc. New features are added inside this folder. Each feature folder is organized using the Bloc pattern which separates the data, business logic and presentation concerns .
The bloc folder is the business logic part which contains the different states which the application can be and the events that change these states. Models are the data models ,repositories help to get the data from backend system and the views folders contains UI classes to displays data and interact with users.
Utils is for utility classes that are used commonly throughout multiple features of the app.
Widgets folder is for UI components that can be shared or used across many features. These can include animations, cards, or list display styles.
Packages folder is outside of the lib folder. This is because its purpose is to put libraries or classes that can be used across many applications. Hence for easy sharing with other projects they are stored in packages folder.
With the project structure completed I will continue to develop the features one by one and will share you my progress on this platform.
Thanks for reading, comments and feedback for improvements are welcome.
Follow me here or on twitter to get my next updates.
