Lesson 3 of 51 beginner

Setting Up Flutter

Preparing Your Developer Toolkit

Open interactive version (quiz + challenge)

Real-world analogy

Before you can bake a cake, you need an oven, bowls, and ingredients. Before you can build Flutter apps, you need to install your tools: the Flutter SDK (your oven), VS Code (your kitchen counter), and extensions (your special utensils). Setting up takes a little time, but you only do it once!

What is it?

Setting up Flutter means installing the Flutter SDK, a code editor (VS Code), and platform tools (Android Studio for Android, Xcode for iOS). The 'flutter doctor' command checks that everything is ready. Once set up, you can create and run Flutter apps with simple terminal commands.

Real-world relevance

Professional Flutter developers work with VS Code or Android Studio daily. The setup process is a one-time investment that unlocks the ability to build apps for every platform. Companies prefer Flutter because developers only need ONE setup to target ALL platforms.

Key points

Install Flutter SDK — The Flutter SDK is the core toolkit. It includes the Dart language, Flutter framework, and command-line tools. Download it from flutter.dev and add it to your system PATH so you can use the 'flutter' command from anywhere in your terminal.
flutter doctor - Health Check — Run 'flutter doctor' in your terminal to check if everything is set up correctly. It checks for Flutter SDK, Android Studio, Xcode (Mac), VS Code, and connected devices. Green checkmarks mean ready, red X means something needs fixing.
Install VS Code — Visual Studio Code is the recommended editor for Flutter development. It is free, lightweight, and has excellent Flutter support. Download it from code.visualstudio.com. It is where you will write all your code.
Essential VS Code Extensions — Install the 'Flutter' extension (which includes Dart) from the VS Code marketplace. This gives you code completion, error highlighting, debugging, and Hot Reload support. Also install 'Flutter Widget Snippets' for faster coding.
Android Studio & Emulator — For Android development, install Android Studio to get the Android SDK and emulator. The emulator is a virtual phone on your computer so you can test your app without a real phone. You can also use a real device via USB.
iOS Setup (Mac Only) — If you have a Mac, install Xcode from the App Store for iOS development. Run 'sudo xcode-select --install' for command-line tools. You can test on the iOS Simulator without a real iPhone.
Web Development Setup — Flutter can build web apps too! Chrome is the default browser for testing. Just run 'flutter run -d chrome' to launch your app in a browser. No extra setup needed -- Flutter's web support is built in.
Your First Flutter Command — Once everything is installed, open your terminal and run 'flutter create my_first_app'. This creates a complete Flutter project with all the files you need. Then 'cd my_first_app' and 'flutter run' to launch it!
Project Structure Overview — A Flutter project has a specific folder structure. The 'lib/' folder is where your Dart code lives. 'pubspec.yaml' lists your dependencies. 'android/' and 'ios/' contain platform-specific code that you rarely need to touch.

Code example

# Complete Flutter Setup Guide

# Step 1: Install Flutter SDK
# Download from https://flutter.dev/docs/get-started/install

# Step 2: Add to PATH (macOS/Linux)
export PATH="$HOME/flutter/bin:$PATH"

# Step 3: Verify installation
flutter --version

# Step 4: Run the doctor
flutter doctor

# Step 5: Fix any issues the doctor finds
flutter doctor --android-licenses

# Step 6: Create your first app!
flutter create hello_flutter
cd hello_flutter

# Step 7: Run it!
flutter run

# Useful commands:
flutter devices          # List available devices
flutter run -d chrome    # Run on Chrome
flutter run -d emulator  # Run on emulator
flutter clean            # Clean build files
flutter pub get          # Install dependencies

Line-by-line walkthrough

1. A comment heading for the setup guide
2.
3. Step 1 comment: installing the Flutter SDK
4. A comment with the download URL
5.
6. Step 2 comment: making flutter accessible from terminal
7. The export command adds Flutter to your system PATH
8.
9. Step 3 comment: checking the installed version
10. The flutter --version command shows what version you have
11.
12. Step 4 comment: running the health check
13. flutter doctor scans your system for issues
14.
15. Step 5 comment: fixing any problems found
16. This command accepts Android SDK licenses if needed
17.
18. Step 6 comment: creating your first project
19. flutter create generates a complete project from a template
20. cd changes into the new project directory
21.
22. Step 7 comment: running the app
23. flutter run compiles and launches your app on a connected device
24.
25. A comment labeling useful commands
26. flutter devices lists all connected phones, emulators, and browsers
27. flutter run -d chrome launches the app in Chrome browser
28. flutter run -d emulator launches on an Android emulator
29. flutter clean removes old build files to fix issues
30. flutter pub get downloads packages listed in pubspec.yaml

Spot the bug

# Setting up a Flutter project
flutter create My First App
cd My First App
flutter run

Need a hint?

Look at the project name. Are spaces allowed in Dart/Flutter project names?

Show answer

Flutter project names cannot contain spaces or capital letters. They must use lowercase with underscores. Fix: flutter create my_first_app, then cd my_first_app.

Explain like I'm 5

Before you can play a video game, you need to set up the game console, plug in the controller, and connect it to the TV. Setting up Flutter is the same idea! You download the Flutter toolkit (the console), install VS Code (the TV screen where you see your work), and add extensions (the controller). Once everything is plugged in, you are ready to play -- or in this case, build apps!

Fun fact

The 'flutter doctor' command was inspired by Homebrew's 'brew doctor' on Mac. It checks over 20 different things on your system. Some developers run it as a morning ritual -- like a health checkup for their dev environment!

Hands-on challenge

Install Flutter on your computer following the steps above. Run 'flutter doctor' and try to get all green checkmarks. Then run 'flutter create my_first_app' and 'flutter run' to see the default Flutter app!

More resources

Flutter Installation Guide (Flutter Official)
Set Up an Editor (Flutter Official)
Flutter CLI Reference (Flutter Official)

Open interactive version (quiz + challenge) ← Back to course: Flutter & Dart