Flutter Folder Organization
March 17, 2021
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.
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.
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.
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 file store files are hidden from the IDE, which needs to be ignored when a project is uploaded to version control platforms like
.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.
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
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.
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
Peer Review Contributions by: Odhiambo Paul
About the authorJerim Kaura
Jerim Kaura is an undergraduate student pursuing Bachelor of Computer Science. He has a wide interest in Web technologies & Android programming. He also loves analyzing and designing algorithms.