Flutter – File Structure
Flutter in 2021 is the rising star in the field of cross-platform app development. Be it a student’s college project, a small startup, a unicorn or big tech giants all are using flutter. The file structure is the organization of the data of an application. The file structure is something that plays a very important role in the effective and easy management of the project be it of any size. As the size of a project grows, it becomes more and more important to have a proper structure and format for the code otherwise it can lead to many undesired problems such as:
- Unable to find the specific file in a repository, making it a time-consuming task.
- Unfit for teamwork.
- Difficult to maintain.
- Or in the worst-case scenario, it can result in low performant app.
Note: There is a package available for minimizing this task without spending much time on creating or organizing files in flutter. If you wanted to create your own you can follow the below steps.
To take charge of all these problems we need to have a good file structure in our flutter app, and that is what we are going to discuss in this article. Although flutter does not give any recommendations in the structuring of the app, still we should do it in the best possible manner. To achieve the best possible file structure of a general flutter application we will divide it into seven parts. But before that one important thing that we always need to keep in mind is the naming of the file and directories must always be in the proper format. For instance, if someone is creating a social media app and wants to make a file to store data of its uses, then this is how it should be named.
Naming for files and directories //this is the right method user_data.dart (lower case for both words separated by underscore) //these methods should be avoided userData.dart (camel case) UserData.dart (upper case for both words) Loginview.dart (upper case for first word) Login_View.dart (upper case for both words separated by underscore)
Whenever we create a new project in flutter these are the files and directories that we are provided with. But these are just the bare basics we will add some other folders and files in the project that are listed below.
1. Assets: Static assets for the app.
This directory is on the root level will contain all the static assets that are used in the application, for example, fonts, icons, logos, background images, demo videos, etc. It is very much recommended that we should have different directories for a different type of data for example images, videos & logos, should have a different folder of their own so that it becomes easier to maintain and access them.
2. Cloud Functions: Cloud functions used in the app.
Cloud functions are the back-end code is stored on some servers such as Google Cloud, these functions run when some specific event happens. An example of the cloud function in social media would be a function which at the click of a button opens a URL that receives the text, audio, or video data and stores it on the server for future use. It becomes very convenient when all the cloud function is on the root level of the application.
3. Screens: Screen /UI of the app.
This directory will contain the actual layout of the UI for the entire application. It can further be distributed into two-three folders. One which stored the flash screen and onboarding pages such as login/sign-up screen, the second folder can store the home screen and other generally used screens, and the third folder can contain screens that are not that important
4. Providers: Interactions outside the app.
This directory is supposed to hold all the interactions that transact the data from outside the app. This is different from the cloud functions, in regards to that none of the code in this directory will interact will cloud storage or server. If we take into consideration a weather app a good example would be the weather and the location data that is received from the API in the form of JSON that needs to be translated for use.
5. Utilities: Function or logic used in the app.
This directory will hold all the app logic or business logic of our entire application. Again a good example in the weather app would be when a user selects a different location the weather data should also change accordingly. Or in the case of the social media app when logins the app data should also change accordingly.
6. Widgets: Widgets / Layouts used in the app.
It becomes clear all by the name itself that this folder will hold all the static widgets or the widgets that are used multiple times in the application. For example, if it is a social media app like Instagram, the list view of all the suggested friends is always the same, the only thing that changes in the data. Or if it is a weather app the tile which shows a particular location is the same for all the location, the only thing that change is the name of the place.
7. Models: Collection of data.
Models are the collection of data that are usually sourced from the servers, users, or external APIs, these are used in combination with widgets to complete the user interface of the app. Again, taking an example of the weather app a model or a set of data could be the name of the location, temperature in both Celsius and Fahrenheit. If we take into consideration a social media app that is showing a user’s profile page then it may contain the username, age, a profile pic, a description, etc.
To a beginner, it might seem absurd or useless to bifurcate a flutter application into so many portions, but if maintaining a good file structure becomes a habit it could be many benefits. And for big organizations working on production applications, maintaining a good file structure is not an option it’s a necessity.