Dissecting a Flutter app folder structure

View: 23    Dowload: 0   Comment: 0   Post by: admin   Category: Development Tools   Fields: Other

0 point/1 review File has been tested

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 following screen, In this article we will focus on understanding the contents of highlighted section (Project Window) in the 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 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 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.

  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 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.

  3. 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

  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 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.
    • <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 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

Dissecting a Flutter app folder structure

Dissecting a Flutter app folder structure Posted on 05-04-2018  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. 5/10 23

Comment:

To comment you must be logged in members.

Files with category

 
File suggestion for you
File top downloads
Codetitle.net - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.net Develope by Vinagon .Ltd