Dissecting a Flutter App Folder Structure

In my last article, I mentioned the step by step installation guide about how to install Flutter with Android Studio on Mac as well as Windows. In this article we will dissect the folder structure of default Flutter app and understand how to manage the various resources needed for developing a cross platform app using Flutter.

When we open any Flutter application in any IDE, we get the following screen. In this article, we will focus on understanding the contents of highlighted section (Project Window) in the screen.

In project window, we see that there are two main collapsible sections:

1. Application Section: This section is named on the name of the application (like in all the images of this article will be shown as trflutterex which is the name of my app) and shows the Physical Folder location and contents. This is the main section on which any Flutter app developer will work on. When expanded this section will look like the following:

   

2. External Libraries section: This section is a kind of Virtual structure of all the libraries and SDKs used in the application, it is maintained by IDE and gets automatically updated when we change any in configuration in pubspec.yaml, <appname>.iml, <appname>_android.iml will mention the purpose and use of these files later in the article.

Application Section Explained

The application section or the Application folder contains following folders and files whose requirements and usage is explained as below:

1. android: As the name suggests, this folder contains all the Android related files and code for the application. The main file and folder which we have to work on in this are highlighted below:

   

   • res folder: This folder contains all the non programmable resources which are used in the applications like icons, images any style values, etc.
   • AndroidManifest.xml file: This file contains essential information about the application which is required by Android SDK. Read this document for more details.

   Apart from these, we don’t have to make any changes in this folder unless we are going to do any platform level customization in the app which is very rarely required and not advisable especially if you don’t know about native Android development.

2. ios: Just like android folder, this folder contains the iOS related files and code for the application. The main file and folder which we have to work on in this are highlighted below:

   

   • Assets.xcassests folder: This folder contains all the icons and images used in the application,
   • info.plist file: Just like AndroidManifest, this file contains essential information about the application which is required by iOS SDK. Read this document for more details.

   Apart from these, we don’t have to make any changes in this folder unless we are going to do any platform level customization in the app which is very rarely required and not advisable especially if you don’t know about native iOS development and Flutter integration with it.

3. lib:

   

   This is the main folder where we have to write all our application code, the default project template currently only contains main.dart file which is kind of an entry point for the Flutter application. When we will start creating multi screen application following some design pattern, we will have to create more files and folders inside this folder. The Language which is used for Flutter app development is Dart, will explain more about this in future articles.

4. test:

   

   As the name suggests, this folder is used to store and manage testing code for the application, just like lib folder, this folder also has only one file by default.

5. Files on Root: These are configuration files which are used by various IDE and language tools explained as below:

   

   • .gitignore: This is a hidden file used IDE to store the list of files which need to be ignored when the source code is uploaded/check-into to any Git versioning system like Github or Bitbucket.
   • .metadata: This also is a hidden file used by IDE to track the properties of the Flutter project.
   • .packages: In every language or SDK, we require a Package manager in order to manage 3^rd party or reusable controls or components (like we have Nuget for Visual Studio and .NET). In case of Dart, the Package Manager is called Pub and this hidden file in used by Pub to manage the packages for the project.
   • android.iml: This is an XML file used by IntelliJ engine to get the configuration of JAVA_MODULE used by the project. .iml => IntelliJ Module File.
   • pubspec.lock: Just like .packages, this file is also used by Pub package manager in order to get the concrete versions and other identifying information for every immediate and transitive dependency a package relies on.
   • pubspec.yaml: This is the only file in all these files which we have to make changes in when we have to use any 3^rd party flutter package. This file is used by Pub package manager to get and load the packages used in the project. Please read this documentation about how to make changes in this file. YAML => Yet Another Multicolumn Layout.
   • README.md: This is a Markdown file used to mention any information about the project. It’s an optional file.
   • <appname>.iml: Just like android.iml, this file contains configuration information about the project components which are used by IntelliJ engine.
   • <appname>_android.iml: This file also contains Android configuration information about the project which is used by IntelliJ engine.

This was a brief explanation of the Flutter app folder structure, we will get more used to this as we work further on Flutter development. Let me know if I have missed anything or if you want to know about anything in particular related to Flutter development. I will be coming up with more such articles in the near future.