Flutter Folder Organization
Introduction
Folder organization helps optimize the performance of an application. As the size of an Android project increases, proper folder organization is necessary to avoid bugs and keep your code maintainable. In as much as flutter documentation does not list a specific standard for folder organization, files and folders should be organized by programmers following a particular pattern. <!--more--> Since there is no rule to flutter folder organization, this article explains just one of the efficient ways of organizing your files and folders in a flutter project.
Table of contents
- Default files and folders in a Flutter project.
- Folder organization.
- Benefits of maintaining a proper folder structure.
- Conclusion
Default folders and files
When we initialize any flutter application with the flutter create appname command, the flutter tool creates an application template with default files and folders as shown.
Android: The Android folder contains files and folders required for running the application on an Android operating system. These files and folders are autogenerated during the creation of the flutter project. It's recommended that these folders and files are left as is.
The android folder's primary sub-folders are the res folder and AndroidManifest.xml file. The res folder contains non-programmable resources required for the application, like icons, images, and fonts, while the AndroidManifest.xml file contains information needed by the application SDK.
iOS: Like the Android folder, this folder contains files required by the application to run the dart code on iOS platforms. The main files under the ios folder are Assets.xcassests folder, and info.plist file. The Assets.xcassests folder is like the res folder in Android. It contains non-programmable resources required for the application.
The info.plist file is similar to the `AndroidManifest.xml file'. It stores information required by the SDK of the application. If any modification is to be done to make the application-specific to IOS platforms, it should be done in this folder.
The .idea folder will contain settings related to the code editor you are using to build the application. These settings are specific to the current project. However, you could specify default project settings that all created applications will depict.
Lib: This is the most important folder in the project, used to write most of the dart code. By default, the lib folder contains the main.dart file, which is the application's entry point. This configuration, however, can be changed.
.gitignore: The gitignore file store files are hidden from the IDE, which needs to be ignored when a project is uploaded to version control platforms like GitHub.
.metadata: Like the .gitignore, this file is also hidden. It contains metadata required by the flutter tool to track the flutter project.
.packages: Since flutter is a framework, and it comes with numerous packages and libraries. The .packages file holds the path to every package and library used in the project. Changes should not be made to this file by programmers.
pubspecam.lock: This file contains the version of each dependency and packages used in the flutter application.
pubspec.yaml: This is the file we use to add metadata and configuration specific to our application. With this file's help, we can configure dependencies such as image assets, fonts, and app versions.
README: This markdown file is used to describe your application in the GitHub repository. You can include what your project does and the dependencies it uses in this file.
Folder oragnisation
Having understood the default files and folders provided by the flutter boilerplate, it time to organize our folders to later scale without extra resource consumption. As stated above, if our application drains much power in a short time, then the client will give it a negative review.
Adding the assets folder
As we have seen above, the default boilerplate includes assets in the public.yaml folder. However, in our organization, we will add a separate asset folder in the root directory then add the path to the pubspec.yaml file as shown below.
flutter:
sdk: flutter
assets:
- assets/images/image.jpg
- assets/icons/home.ico
- assets/fonts/monsterat.tff
The assets folder will contain the fonts, icons, and the images. Figure 2 below shows how the files will look after adding the assets folder path.
Expanding the lib folder
The lib folder is where most of the code is written. We will break the folder into several subfolders, as shown below.
Screens: This folder will contain the application UI files rendered on the device screen.
Utils: This folder contains the functions used to implement the application's business logic. For instance, if we build a social media application that supports a multi-account login, the utilities will ensure that the data rendered is changed according to the currently logged-in account.
Widgets: This folder contains widgets that are used repeatedly in the application. If you are using an API to list GitHub accounts following a particular user, the followers' list view remains the same. Only the data that is rendered is dynamic. In such a case, we will use the followers widget in our widgets folder.
Data: The data folder contains data collections that are fetched from services or databases. For instance, if our application will use firebase, we could have a user model containing information about the user relating to password name, age, etc.
Services: Services folder should handle your application's networking logic. For example, once a user gets authenticated with Google or GitHub, the application needs to update the backend with the access token. The service folder will contain the implementation of the logic responsible for handling this functionality.
Benefits of maintaining of good folder organisation
Maintaining good folder structure is a good programming practice that will help your application from the following problems:
- Being unable to find a specific file.
- Writing a block of codes again and again.
- Mixing up User Interface and backend code.
- Unlimited local variable.
- App causing major battery drain.
- Confusion when developing it as a team.
Conclusion
In this article, we have understood every file and folder generated during the creation of a flutter application. We went ahead and organized the files and folders to facilitate code maintainability.
Follow along with me in the next article to build a working application using this folder structure. You can find this project structure here
Happy coding.
Peer Review Contributions by: Odhiambo Paul
