Google Flutter - Creating Your First Project and Review Its Folders and Files

Introduction

You can create a Flutter project from your IDE or from the command line.

The default project displays a counter. You can increment the counter by hitting the floating &quote;+&quote; button on the bottom right.

Lets create this Flutter project and take a review of the folders and files that are created for you.

Install Your Editor

For me, its between Android Studio (heavy but comprehensive) and Visual Studio code (lighter weight).

Flutter SDK

Download the Flutter SDK and unzip it into a folder. Add that folder plus 'bin' to your path in your shell script.

For example on my Mac I installed and unzipped the Flutter SDK to '~/tools/flutter/bin'. Then I edited '~/.zshrc' and set the path as below:

export PATH=/Users/marcusclow/tools/flutter/bin:$PATH

Create Project (Android Studio)

1. Select the following menu option: File > New > New Flutter Project. This will open a wizard.
2. Select Flutter application and hit next.
3. Specify project name, sdk path (if not yet set) and hit next.
4. Enter the package name. The convention is that a programmer in a given organization will start package names with their organization's domain name, as a unique identifier -- in reverse order. This prevents clashes between code from different organizations. One you have entered the package name, hit finish.

Create Project (Visual Studio Code)

1. Ensure that you have installed the Flutter Extension into Visual Studio Code before doing this.
2. Open the command palette using the keyboard shortcut Ctrl+Shift+P (Command+Shift+P on the Mac) and you will see a list of the available commands. If you start to type ‘Flutter’ in this box, then you will see a list of Flutter commands.
3. Select the command ‘Flutter: New Project’.
4. Enter the name of the new project:
5. Select a folder to create the project in.
6. Code will take a couple of minutes to setup the files in the project.

Command Line

Project Created

Congratulations - you have created your first Flutter project! Now let’s take a look at it.

Folders

• root.
  This usually contains configuration files. The most important of these configuration files is the ‘pubspec.yaml’ file, which declares the project dependencies and resources.
• android.
  As the name suggests, the folder contains all the Android-related files and code(s) for an Android project. This is where Android-specific settings and code resides. When building for Android, Flutter uses Gradle as the dependency manager. When you build your Flutter project, your Flutter code is generated into native code and injected into this folder. You very rarely change things in this folder.
• build.
  This folder is created and used by gradle when you build the project. Generated and managed by the Flutter SDK. Don’t change things in this folder.
• ios.
  Similar to the ‘android’ folder, this folder contains the iOS related files and code(s) for an XCode project. This is where iOS-specific settings and generated code resides. When building for iOS, Flutter uses Cocoapods as the dependency manager. Like the ‘android folder’, when you build your Flutter project, your Flutter code is generated into native code and injected into this folder. You very rarely change things in this folder.
• lib.
  This is where the application code resides. You should see a file ‘main.dart’, the entry point for the Flutter application. This is the file you select and run. You will add code, files and subfolders into this folder. This is the folder in which you will work 90% of the time.
• test.
  This is where the unit testing code resides. You may add more files and subfolders into this folder.

Important Files

• .metadata
  Flutter SDK uses this file to save project info. Don’t change this file.
• .packages
  Generated file used to manage packages. Don’t change this file.
• [project_name].iml
  Flutter SDK uses this file to save dependency info & settings. Don’t change this file.
• pubspec.lock
  Generated file used to list the specific versions of each dependency (immediate and transitive) that your project uses. Don’t change this file.
• pubspec.yaml
  Used to specify your projects dependencies – what 3rd party packages your project may use. You can also specify additional project resources in this file: fonts, images etc. You can change this file.
• readme.md
  Automatically generated readme file. You can add additional information about the project here.

Project Application Code File

As mentioned earlier, when you create a new Flutter project, it creates a default ‘counter’ app that displays a counter in the middle of the screen. The code for this default application resides in a single file: ‘main.dart’ in the ‘lib’ folder.

Dart lets you declare multiple objects within a single file!

This ‘main.dart’ acts as the entry point of the application, the file you will launch the app with.