Day 2: Understanding Flutter Project Folder Structure and Running the Emulator

Sun, May 2025 19:14:50

Hi friends! On this second day of learning Flutter together, we’re going to discuss something very important and fundamental: the folder structure of a Flutter project. We’ll also learn how to run a Flutter app on an emulator or a physical device. This article is perfect for those of you who are just starting out with Flutter, especially if you followed yesterday’s lesson. Let’s get started!

Why Understand Flutter’s Folder Structure?

If you’ve ever coded with other frameworks like Laravel, React, or Android Native, you’ll know that each framework has its own folder structure. Flutter is no different. By understanding this structure, we can:

• Navigate through the project more easily.
• Know where to put each file.
• Work in teams more efficiently.
• Understand the app’s flow and why something might go wrong.

Basic Structure of a Flutter Project

When we create a new Flutter project using:

flutter create project_name

We’ll get a folder structure like this:

project_name/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── pubspec.yaml
├── .gitignore
├── .metadata
└── README.md

Let’s break down the important parts:

1. main.dart

This is the entry point of our Flutter app. Here we usually call the runApp() function and load our main widget. For example:

void main() {
  runApp(MyApp());
}

This file is located in the lib/ folder. All our main Dart code is typically placed inside lib/.

2. pubspec.yaml

This file often confuses beginners, but it’s very important!

It contains the configuration of our project, including:

• App name and version.
• Dependencies (packages we use).
• Assets (images, fonts, etc.).

Example content:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

flutter:
  assets:
    - assets/images/

After adding packages or images, don’t forget to save the file and run:

flutter pub get

3. lib/

This is the main folder where we write all our Dart code. It’s often structured further for modularity. Example structure:

lib/
├── main.dart
├── screens/
├── widgets/
├── models/
└── utils/

• screens/: contains app pages.
• widgets/: reusable small components.
• models/: where our data classes go.
• utils/: helper functions.

4. android/ and ios/

These folders contain native platform configurations. For example:

• Adding permissions.
• Changing the package name.
• Building APK/IPA files.

We rarely change this unless needed for things like Firebase integration, changing app icon, or requesting permissions.

5. test/

This folder is for writing unit tests or widget tests. It might not be used much at the beginning, but it’s good practice to start writing tests.

How to Run the Emulator or a Physical Device

Now that we understand the structure, let’s run the app. You can use either an emulator or a physical device.

A. Running on Emulator

1. Open Android Studio or VS Code.
2. Make sure the emulator is set up:
   • Android Studio > Device Manager > Create Device.
3. Start the emulator via Device Manager or terminal:

emulator -avd emulator_name

4. Once the emulator is running, start the app:

flutter run

B. Running on a Physical Device (Android)

1. Enable Developer Mode and USB Debugging on your phone.
2. Connect it to your computer via USB cable.
3. Run this command:

flutter devices

If the device is detected, you can run:

flutter run

Or select the device from the bottom bar in VS Code / Android Studio.

Debugging Tips:

• If you see permission errors on Linux/macOS:

sudo chmod +x path_to_flutter/bin/flutter

• Try restarting adb:

adb kill-server
adb start-server

Conclusion

In this second day, we’ve learned:

• The Flutter folder structure: lib/, pubspec.yaml, main.dart, android/, ios/, test/.
• How to run apps on both emulator and physical devices.

It may seem like a lot at first, but once you get used to it, it becomes second nature. In the upcoming days, we’ll start diving into UI and app logic.

See you on Day 3! Don’t forget to commit your project to Git.

Follow the #BelajarFlutter series so you don’t miss the next materials!