Everything You Need to Know About Flutter Project Files & Folders

Introduction:

In this article, we’ll take a deep dive into the files and folders within a Flutter project. We'll explore their significance and understand the roles they play in the development process.

Create New Flutter Project:

To create a new Flutter project using Visual Studio Code follow the steps below:

• Launch Visual Studio Code

• Use keyboard shortcut Command + Shift + P to launch command palette.

• Type flutter to filter out the options visible in command palette.

• Select “Flutter:New Project” option.

• Select Application as a project template.

• Choose the location on your computer where you want to create the Flutter project.

• Enter the project name and hit enter to create the project.

Once the project is created, Visual Studio Code will open up the project. This is how the Visual Studio Code Explorer looks like once the Flutter project is created.

Now, let's explore the files and folders available in the Flutter project mentioned above and understand their importance.

.dart_tool:

This folder is used internally by dart and Flutter. It is generally used for caching files specific to our current project.

It also includes a file called version, which contains the Flutter SDK version used to create the project, as shown below.

This folder is managed automatically and as a developer we typically don’t have to edit these files.

.idea:

This folder mostly contains configuration files and setting specific to IntelliJ or Android Studio IDE. Files under this folder are managed by IDE. We typically don’t have to edit these files.

android:

This folder contains all the files necessary to run our Flutter application on android devices. The content of this folder mirrors a standard android project structure.

Key Files:

• AndroidManifest.xml: This file defines the Android app metadata like app name, icon and permissions etc.

• settings.gradle: This file specifies the Gradle settings for the Android project.

The contents of this folder are only modified when we need to integrate native Android features or add platform-specific configurations.

build:

This is an auto-generated folder created during app builds. It contains the compiled app binaries for our application. If you have ever worked with a .NET application, it's similar to the bin folder in a .NET application.

This folder is managed automatically by Flutter's build tools.

iOS:

This folder contains all the files necessary to run our Flutter application on iOS devices. The content of this folder mirrors a standard iOS project structure.

Key Files:

• Info.plist: A file containing key-value pairs required for configuration of our iOS application such as permission, bundle ID etc.

The contents of this folder are only modified when we need to integrate native iOS features or add platform-specific configurations.

lib:

The core of our Flutter app. All Dart code for our Flutter application like building user interface, implementing business logic, calling API’s to get the data and much more will reside here.

Key File:

• main.dart: The entry point for our application. It includes a main function which intern calls the runApp() function to launch our application and initialize it.

This is the directory where we will be spending most of our development time.

linux:

This folder contains the necessary files and folders required to run a Flutter application as a Linux application.

macos:

This folder houses the necessary files and folders required to run a Flutter application as a macOS application.

test:

Testing is crucial for building reliable apps, and that’s where the test/ folder comes in.
In this folder we can write unit tests, widget tests, and even integration tests to ensure our app works as expected.

web:

This folder houses the necessary files and folders required to run a Flutter application within a web browser.

windows:

This folder contains the necessary files and folders required to run a Flutter application as a Windows application.

.gitignore:

Specifies the files or folders that should be ignored by Git.

.metadata:

This file contains metadata for Flutter tooling. Generally used during the Flutter upgrade process. This file is managed automatically.

analysis_options.yaml:

This file is used to configure the static analyzer for our Flutter project. Static analysis helps us find problems before running any code. It's a powerful tool for preventing bugs and ensuring that code follows style guidelines. When we create a new Flutter project, rules from the flutter_lints package are included by default to promote good coding practices.

Please visit https://github.com/flutter/packages/blob/main/packages/flutter_lints/lib link to get more information about the rules included in flutter_lint package.

We can use this file to disable rules imported from flutter_lint package or to enable additional rules.

.iml:

This is an xml file containing information that IntelliJ IDE can used to configure the Flutter project. This file is managed automatically by IntelliJ IDE.

pubspec.lock:

As the name suggests, this file locks the versions of dependencies used in our project. This ensures that everyone working on the project uses the same versions of the dependencies. This file is managed automatically and should not be edited manually

pubspec.yaml:

This is the central configuration file for our Flutter project. It contains a lot of information about our project:

• Metadata (like project name, description, version)

• Define dependencies (For example, to call an API we need http client. We can add http package as a dependency in our project and then use the http client provided by that package to call the API`’s.)

• List Assets (We can list font’s and images used in our application)

We will be modifying this file to manage our app dependencies and assets (Images and fonts).

README.md:

A markdown file for documenting our project. It’s often the first file others see when they visit our repository. This file helps people understand:

• What this project is all about, provides detailed instruction for installation and how to use it

• Includes guidelines on how to contribute to that project.

• License information

I have also created a YouTube video regarding this topic, so if you would like to watch a video tutorial, then please go to https://youtu.be/jO2TE-U_HZM?si=UN7ED1CDb_judwEd

Conclusion:

In this article, we explored the various files and folders that make up a Flutter project, understanding their roles and significance in the development process. From the core lib directory where most of the development work takes place, to configuration files like pubspec.yaml and analysis_options.yaml, each component plays a crucial part in building a Flutter application. By familiarizing ourselves with these elements, we can better manage our projects and streamline our development workflow. I hope you found this guide informative and helpful in navigating your Flutter projects.

Happy Coding!