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.
- 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 following:
- 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 ,
.iml ,will mention the purpose and use of these files later in the article _android.iml
Application Section Explained:
The application section or the Application folder contains following folders and files whose requirements and usage is explained as below :
- 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 do 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 specially if you don’t know about native Android development.
- 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 do 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 specially if you don’t know about native iOS development and Flutter integration with it.
- lib :
This is 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 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
- 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.
- 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 ingonred 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 an Package manager in order to manage 3rd 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 a XML file is used by IntelliJ engine to get the configuration of JAVA_MODULE used by the proect. .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 make changes in when we have to use any 3rd 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 mentioning any information about the project, It’s an optional file.
.iml: Just like android.iml this file contains configuration information about the project components which are used by IntelliJ engine _android.iml: This file also contains Android configuration information about the project which are used by IntelliJ engine
This was 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 you want to know about anything in particular related to Flutter development. Will be Coming up with more such articles in near future
🙂 🙂 🙂 🙂 Happy Coding 🙂 🙂 🙂 🙂