In my last article, I mentioned the step by step installation guide for Flutter with Android Studio on Mac as well as Windows. In this article, we will dissect the folder structure of a 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 the project window, we see that there are two main collapsible sections.
- Application Section
This section is named on the name of the application (like 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. 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 the IDE and gets automatically updated when we change any configuration in pubspec.yaml , .iml . _android.iml .
Application Section Explained
The application section or the application folder contains the following folders and files whose requirements and usage is explained below:
- android
As the name suggests, this folder contains all the Android related files and code for the application. The main files and folders 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, especially if you don’t know about native Android development.
- ios
Just like the Android folder, this folder contains the iOS related files and code for the application. The main files and folders 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 especially if you don’t know about native iOS development and Flutter integration with it.
- 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 applications 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 , and I 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 IDEs and language tools explained below:
![Xamarin]()
- .gitignore
This is a hidden file IDE used to store the list of files which needs to be ingored when the source code is uploaded/checked into to any Git versioning system like Github or Bitbucket.
- .metadata
This also is a hidden file used by IDEs to track the properties of the Flutter project.
- .packages
In every language or SDK, we require a package manager in order to manage third-party or reusable controls or components (like we have Nuget for Visual Studio and .Net). In case of Dart, the Package Manager calls Pub and this hidden file is 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 proect. .iml => IntelliJ Module File.
- pubspec.lock
Just like .packages, this file is also used by the 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 in which we have to make changes when we have to use any third-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.
- .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 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 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.