Getting Started With Flutter – (2) Project Structure

Subscribe On YouTube

This is episode 2 of the Getting Started With Flutter series here on CodingTheSmartWay.com. In the first episode we’ve covered everything what’s needed to setup the Flutter™ development environment on your system, create a first Flutter project and run this Flutter application in an Android Virtual Device.

In this second part we’re going to dive deeper into the project structure so that you’ll be able to understand what the Flutter project is consisting of.

First let’s take a quick look at the project structure which has been created when executing the flutter create command:

Folders In Your Flutter Application

At the very top you can see the .idea folder which holds configuration for Android Studio. As we’re not going to work with Android Studio in this tutorial series the content of this folder can be ignored.

The next folder which is available is the android folder. This folder contains a complete Android native app project and is used when building your Flutter application for Android. In this case the Flutter code is compiled and then injected in this Android project, so that the result is a native Android application.

E.g. when we’re using the Android emulator like seen in the first part of the project, this Android project is used to build the Android application which is then deployed to the Android Virtual Device.

In most cases you do not need to edit anything in the android folder directly.

The build folder is the holding the compiled code of your Flutter application. The content of this folder is automatically generated as part of the Flutter build process, so that you don’t need to change anything manually inside this folder.

If you’re working on a Mac you should be able to see the ios folder in your project structure as well. The folder contains a complete XCode iOS native project which is used when building your Flutter application for iOS. It’s used in the same way as the project which is contained in the anroid folder is used when building for Android.

Building Flutter application for iOS is only possible when working on macOS. That’s the reason why this folder is only available when the project is created on a macOS.

Inside the lib folder you’ll find the Dart files which contain the code of your Flutter application. So this is the folder where you’d spend most of the time when implementing Flutter applications. By default this folder is containing the file main.dart:

The test folder is containing code which is written for the Flutter application in order to perform automated test when building.

Files In Your Flutter Application

Let’s turn to the files which are available in the project folder.

First you’ll find the default .gitignore file. This is a text file containing a list of files, file extensions, and folders which should be ignored when working with Git. Git is a distributed version-control system for tracking changes in source code during software development.

The entries already included in this file by default should already provide you with a good preset of things which should be ignored and working with Git in your Flutter project, so that you can leave everything as it is.

The next file is called .metadata. This file is managed by Flutter automatically and is used to track properties of the Flutter project. This file is only changed by Flutter and you do not need to edit the content manually at any time.

The same is true for the .packages file. This file contains automatically generated content by the Flutter SDK and is used to contain a list of dependencies for your Flutter project.

The next file you’ll find in your project’s folder is my_flutter_app.iml. This file is always named according to the project’s name and contains further settings of the Flutter project. Usually this file is not changed by you and the content is managed by the Flutter SDK in an automated way.

The pubspec.yaml file is the project’s configuration file you’ll use a lot when working with your Flutter project. This file contains:

  • general project settings like name, description and version of the project
  • project dependencies
  • assets (e.g. images) which should be available in your Flutter application

E.g. when adding new dependencies (Flutter Packages) to the project this file will be used to add the name of the package in the dependencies section and then the Flutter SDK will take care of downloading and adding this package afterwards.

ONLINE COURSE: Learn Flutter & Dart to Build iOS & Android Apps

A Complete Guide to the Flutter SDK & Flutter Framework for building native iOS and Android apps

Learn Flutter & Dart to Build iOS & Android Apps

  • Build engaging native mobile apps for both Android and iOS
  • Use features like Google Maps, the device camera, authentication and much more!
  • Learn all the basics and advanced features which you find in no other course

Go To Course

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.

Using and writing about best practices and latest technologies in web design & development is my passion.