Learn Flutter - Installation & Project Setup

#Introduction

In episode 2 you already understood the Flutter architecture. Now it's time for your hands to touch the terminal. Episode 3 is a full hands-on session: installing the Flutter SDK, verifying the environment, creating a new project, exploring the generated structure, and running your first app.

This entire series will use the same project, so make sure you follow these steps on your own machine. Don't hesitate to repeat them until the commands feel natural. The end goal of this episode is simple: you can create a new Flutter project and run it on a device without looking at the documentation.

#Installing the Flutter SDK and Environment Verification

#Installing the Flutter SDK

Download the latest stable Flutter SDK from the official flutter.dev website, extract it to a directory of your choice, then add the bin directory to your PATH. Once the PATH is available, verify the installation:

flutter --version

The output shows the Flutter version, Dart version, and release channel. If command not found appears, double-check the PATH and make sure the shell was restarted.

#Full Verification with flutter doctor

Run a thorough diagnosis to make sure all toolchains are ready:

flutter doctor

flutter doctor checks the Android toolchain, Xcode, Chrome, and editors. Pay attention to the sections marked with warnings and follow the suggested fixes. The Android toolchain section is the one that most often needs attention — make sure the Android SDK and its components are installed.

#Creating a New Project with flutter create

#Scaffolding Your First Project

Use the official template to create a project:

flutter create my_app
cd my_app

The command flutter create my_app generates a complete Flutter project with all enabled platforms. To set the application identifier, use the --org flag:

flutter create --org com.example -p android,ios,web my_app

The flag -p android,ios,web limits the platforms created so the project is lighter. flutter create --org com.example sets the bundle identifier used when building the release.

#The Flutter Project Structure

#Reading the Anatomy of a Project

The generated project has a standard structure you should get to know:

• lib/ — Dart source code; the main entry point is lib/main.dart.
• test/ — unit tests and widget tests.
• pubspec.yaml — project metadata and the dependency list.
• android/, ios/, web/ — platform folders where native build configuration lives.
• build/ — compile artifacts, created automatically; don't edit it.

name: my_app
description: Aplikasi contoh Flutter.
publish_to: none
version: 1.0.0+1
 
environment:
  sdk: ^3.5.0
 
dependencies:
  flutter:
    sdk: flutter
 
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^4.0.0

In the pubspec.yaml above, the flutter dependency points to the SDK itself. The SDK version is configured in the environment block. Whenever you add a package from pub.dev, record it in the dependencies block, then run flutter pub get.

#Adding Your First Dependency

Download dependencies after editing pubspec.yaml:

flutter pub get

flutter pub get downloads all dependencies and creates a pubspec.lock that pins the exact versions. Run it again every time pubspec.yaml changes.

#Running Your First App

#Preparing a Target Device

Make sure there's a device that can receive the app:

flutter devices

flutter devices lists connected emulators, browsers, or physical devices. If there are none, launch an Android emulator from Android Studio, or start Chrome for the web target.

#Running the App

Launch the app on the target device:

flutter run

flutter run builds and launches the app, then opens an interactive terminal. Press r for hot reload, R for hot restart, and q to quit. The default app shows a counter demo — this is the foundation we'll rebuild in the coming episodes.

#Conclusion

Key takeaways:

• Install the Flutter SDK and add the bin directory to your PATH.
• flutter doctor makes sure all toolchains are ready to use.
• flutter create my_app generates a complete project with a standard structure.
• Know the roles of lib/, test/, pubspec.yaml, and the platform folders.
• Add dependencies in pubspec.yaml, then run flutter pub get.
• flutter run launches the app with hot reload support.

In the next episode 4 we dive into the core of writing UI: basic widgets and layout — the difference between StatelessWidget and StatefulWidget, basic layout with Row, Column, Stack, and Container, managing spacing, alignment, and constraints, and widget composition and builder patterns. You start building real screens.