Flutter Setup & First App

Installing Flutter SDK & IDE Setup

50 min Lesson 1 of 12

Introduction to Flutter Installation

Before you can start building beautiful cross-platform applications with Flutter, you need to set up your development environment properly. This lesson walks you through installing the Flutter SDK on all major operating systems, configuring your preferred IDE, setting up emulators, and troubleshooting common issues. A proper setup is the foundation for a smooth development experience.

Note: Flutter 3.x requires a 64-bit operating system. Make sure your system meets the minimum requirements before proceeding with the installation.

System Requirements

Flutter has specific requirements depending on your operating system. Let’s review what you need for each platform before downloading the SDK.

Windows Requirements

  • Operating System: Windows 10 or later (64-bit), x86-64 based
  • Disk Space: At least 2.5 GB (does not include disk space for IDE or other tools)
  • Tools: Windows PowerShell 5.0 or newer, Git for Windows 2.x
  • Optional: Android Studio for Android development, Visual Studio for Windows desktop development

macOS Requirements

  • Operating System: macOS 10.15 (Catalina) or later
  • Disk Space: At least 2.8 GB (does not include disk space for IDE or other tools)
  • Tools: Xcode (for iOS development), CocoaPods, Git
  • Architecture: Both Intel and Apple Silicon (M1/M2/M3) are supported natively

Linux Requirements

  • Operating System: Any 64-bit Linux distribution
  • Disk Space: At least 1.6 GB (does not include disk space for IDE or other tools)
  • Tools: bash, curl, file, git 2.x, mkdir, rm, unzip, which, xz-utils, zip
  • Shared Libraries: libGLU.so.1 (provided by mesa packages)

Downloading the Flutter SDK

The Flutter SDK can be downloaded from the official Flutter website or cloned directly from the GitHub repository. We will cover both methods.

Method 1: Download from Official Website

Visit https://docs.flutter.dev/get-started/install and select your operating system. Download the latest stable release archive.

Windows Installation

# 1. Download the Flutter SDK zip from flutter.dev
# 2. Extract the zip file to a desired location, e.g.:
#    C:\src\flutter
# IMPORTANT: Do NOT install Flutter in a directory that
# requires elevated privileges (e.g., C:\Program Files\)

# 3. Verify the extraction
dir C:\src\flutter\bin

macOS Installation

# 1. Download the Flutter SDK archive from flutter.dev
# 2. Extract to your desired location
cd ~/development
unzip ~/Downloads/flutter_macos_3.x.x-stable.zip

# Verify the extraction
ls ~/development/flutter/bin

Linux Installation

# 1. Download the Flutter SDK archive from flutter.dev
# 2. Extract to your desired location
cd ~/development
tar xf ~/Downloads/flutter_linux_3.x.x-stable.tar.xz

# Verify the extraction
ls ~/development/flutter/bin

Method 2: Clone from GitHub

You can also clone the Flutter SDK directly from the official GitHub repository. This method makes it easier to switch between channels (stable, beta, master).

Cloning the Flutter Repository

# Clone the stable channel
git clone https://github.com/flutter/flutter.git -b stable

# Or clone a specific version
git clone https://github.com/flutter/flutter.git -b 3.19.0

# Verify the clone
cd flutter
git branch
Tip: Using the Git clone method allows you to easily switch between Flutter channels using flutter channel stable, flutter channel beta, or flutter channel master. The stable channel is recommended for production apps.

Configuring the PATH Variable

After downloading or cloning the Flutter SDK, you must add the flutter/bin directory to your system’s PATH environment variable. This allows you to run Flutter commands from any terminal window.

Windows PATH Configuration

Setting PATH on Windows

# Option 1: Using PowerShell (temporary, current session only)
\$env:PATH += ";C:\src\flutter\bin"

# Option 2: Permanent - via System Properties
# 1. Open Start menu, search for "Environment Variables"
# 2. Click "Edit the system environment variables"
# 3. Click "Environment Variables" button
# 4. Under "User variables", select "Path" and click "Edit"
# 5. Click "New" and add: C:\src\flutter\bin
# 6. Click OK on all dialogs
# 7. Restart any open terminal windows

# Verify PATH is set correctly
where flutter

macOS PATH Configuration

Setting PATH on macOS

# For Zsh (default on macOS Catalina and later)
echo 'export PATH="\$HOME/development/flutter/bin:\$PATH"' >> ~/.zshrc
source ~/.zshrc

# For Bash
echo 'export PATH="\$HOME/development/flutter/bin:\$PATH"' >> ~/.bash_profile
source ~/.bash_profile

# Verify PATH is set correctly
which flutter

Linux PATH Configuration

Setting PATH on Linux

# For Bash
echo 'export PATH="\$HOME/development/flutter/bin:\$PATH"' >> ~/.bashrc
source ~/.bashrc

# For Zsh
echo 'export PATH="\$HOME/development/flutter/bin:\$PATH"' >> ~/.zshrc
source ~/.zshrc

# Verify PATH is set correctly
which flutter
flutter --version

Running flutter doctor

The flutter doctor command is your best friend during setup. It checks your environment and displays a report of the status of your Flutter installation. It tells you exactly what is missing or needs to be configured.

Using flutter doctor

# Run the basic doctor check
flutter doctor

# Example output:
# Doctor summary (to see all details, run flutter doctor -v):
# [+] Flutter (Channel stable, 3.19.0, on macOS 14.0)
# [+] Android toolchain - develop for Android devices
# [+] Xcode - develop for iOS and macOS
# [+] Chrome - develop for the web
# [+] Android Studio (version 2023.1)
# [+] VS Code (version 1.85.0)
# [+] Connected device (2 available)
# [+] Network resources

# Run verbose doctor for detailed information
flutter doctor -v
Note: A checkmark [+] means everything is fine. An exclamation mark [!] means there is a warning but you can still proceed. An X mark [x] means there is a problem that must be fixed. Focus on fixing X marks first.

IDE Setup: Visual Studio Code

VS Code is a lightweight, fast, and highly extensible editor that is excellent for Flutter development. It is the most popular choice among Flutter developers.

Installing VS Code Extensions

Required VS Code Extensions

# Install via the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X):

# 1. Flutter (by Dart Code)
#    - Provides Flutter-specific functionality
#    - Hot reload, widget inspector, device selector
#    - Extension ID: Dart-Code.flutter

# 2. Dart (by Dart Code)
#    - Dart language support (auto-installed with Flutter)
#    - Code completion, analysis, debugging
#    - Extension ID: Dart-Code.dart-code

# Optional but recommended:
# 3. Flutter Widget Snippets
# 4. Awesome Flutter Snippets
# 5. Error Lens (inline error display)
# 6. Bracket Pair Colorizer

Configuring VS Code for Flutter

VS Code Settings for Flutter (settings.json)

{
  "dart.flutterSdkPath": "/path/to/flutter",
  "dart.previewFlutterUiGuides": true,
  "dart.previewFlutterUiGuidesCustomTracking": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "Dart-Code.dart-code",
  "dart.lineLength": 80,
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [80],
    "editor.selectionHighlight": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  }
}
Tip: Enable dart.previewFlutterUiGuides in VS Code settings to see visual guides in your widget tree. These colored lines help you understand the nesting structure of your widgets at a glance.

IDE Setup: Android Studio

Android Studio is the official IDE for Android development and provides excellent Flutter support through plugins. It is heavier than VS Code but offers more integrated Android-specific tooling.

Installing Flutter Plugin for Android Studio

Android Studio Plugin Installation

# 1. Open Android Studio
# 2. Go to File > Settings (Windows/Linux)
#    or Android Studio > Preferences (macOS)
# 3. Navigate to Plugins
# 4. Search for "Flutter" in the Marketplace tab
# 5. Click "Install" on the Flutter plugin
#    (This automatically installs the Dart plugin too)
# 6. Restart Android Studio

# After restart, you should see:
# - File > New > New Flutter Project
# - A Flutter toolbar with hot reload/restart buttons
# - Flutter Inspector and Outline panels

Setting Up Android Emulator

To test your Flutter apps on Android, you need either a physical Android device or an Android emulator. The emulator simulates an Android device on your computer.

Creating an Android Emulator

# 1. Open Android Studio
# 2. Go to Tools > Device Manager (or AVD Manager)
# 3. Click "Create Virtual Device"
# 4. Select a device definition (e.g., Pixel 7)
# 5. Select a system image:
#    - Recommended: Latest stable API level
#    - Download the image if not already present
# 6. Configure AVD settings:
#    - Name: Pixel_7_API_34
#    - RAM: 2048 MB or more
#    - Internal Storage: 2048 MB or more
# 7. Click "Finish"

# Launch emulator from command line:
flutter emulators
flutter emulators --launch Pixel_7_API_34

# Or launch from Android Studio Device Manager
# by clicking the play button next to your AVD
Warning: Android emulators require hardware acceleration (Intel HAXM or AMD Hypervisor). Without it, the emulator will be extremely slow. On Windows, ensure Intel VT-x or AMD-V is enabled in your BIOS settings. On Linux, use KVM acceleration.

Android SDK Licenses

Accepting Android SDK Licenses

# Accept all Android SDK licenses
flutter doctor --android-licenses

# You will be prompted to accept several licenses
# Type "y" and press Enter for each one

# Verify licenses are accepted
flutter doctor

Setting Up iOS Simulator (macOS Only)

If you are developing on macOS, you can use the iOS Simulator to test your Flutter apps on simulated iPhone and iPad devices.

iOS Simulator Setup

# 1. Install Xcode from the Mac App Store

# 2. Configure Xcode command-line tools
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

# 3. Accept the Xcode license
sudo xcodebuild -license accept

# 4. Install CocoaPods (required for iOS dependencies)
sudo gem install cocoapods
# Or using Homebrew:
brew install cocoapods

# 5. Open the iOS Simulator
open -a Simulator

# 6. Choose a device from the Simulator menu:
#    File > Open Simulator > iOS 17.x > iPhone 15 Pro

# Verify iOS setup
flutter doctor
Tip: You can have multiple simulators running at the same time. Use flutter devices to see all available devices and flutter run -d <device_id> to target a specific one.

Verifying Your Installation

After setting up everything, let’s verify that your Flutter installation is complete and working correctly by creating and running a test project.

Complete Verification Steps

# Step 1: Check Flutter version
flutter --version
# Flutter 3.19.0 . channel stable . https://github.com/flutter/flutter.git
# Framework . revision a363t23 . 2024-01-30
# Engine . revision 234jk3a
# Tools . Dart 3.3.0 . DevTools 2.31.0

# Step 2: Run flutter doctor with verbose output
flutter doctor -v

# Step 3: List available devices
flutter devices

# Step 4: Create a test project
flutter create my_test_app
cd my_test_app

# Step 5: Run the test app
flutter run

# If everything is set up correctly, you should see
# the Flutter demo app running on your emulator/simulator!

Flutter Channels

Flutter has multiple release channels that allow you to choose between stability and access to the latest features.

Managing Flutter Channels

# List all available channels
flutter channel

# Switch to stable channel (recommended for production)
flutter channel stable

# Switch to beta channel (preview upcoming features)
flutter channel beta

# Switch to master channel (bleeding edge, may be unstable)
flutter channel master

# After switching channels, upgrade Flutter
flutter upgrade

# Downgrade to a previous version
flutter downgrade
Note: Always use the stable channel for production applications. The beta channel is useful for testing upcoming features, and master is only for contributors or those who need the absolute latest changes.

Troubleshooting Common Setup Issues

Here are the most common issues you might encounter during setup and how to resolve them.

Issue 1: flutter command not found

Fixing PATH Issues

# Verify Flutter is in the correct location
# macOS/Linux:
ls ~/development/flutter/bin/flutter

# Check your PATH
echo \$PATH

# If flutter is not in PATH, add it again:
export PATH="\$HOME/development/flutter/bin:\$PATH"

# Make it permanent by adding to shell config
# Then restart your terminal

Issue 2: Android SDK Not Found

Configuring Android SDK Path

# Set the Android SDK path explicitly
flutter config --android-sdk /path/to/android/sdk

# Common SDK locations:
# Windows: C:\Users\<user>\AppData\Local\Android\Sdk
# macOS:   ~/Library/Android/sdk
# Linux:   ~/Android/Sdk

# Verify the configuration
flutter config
flutter doctor

Issue 3: Xcode Issues on macOS

Resolving Xcode Problems

# Ensure Xcode command line tools are installed
xcode-select --install

# Switch to the full Xcode (not just command line tools)
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

# If CocoaPods issues occur:
sudo gem install cocoapods
pod setup

# Clear CocoaPods cache if needed
pod cache clean --all

Issue 4: Android License Issues

Resolving License Problems

# Accept all licenses
flutter doctor --android-licenses

# If that fails, try using sdkmanager directly:
# Windows:
C:\Users\<user>\AppData\Local\Android\Sdk\cmdline-tools\latest\bin\sdkmanager --licenses

# macOS/Linux:
~/Library/Android/sdk/cmdline-tools/latest/bin/sdkmanager --licenses
Warning: Never modify Flutter SDK files directly. If your Flutter installation becomes corrupted, the safest fix is to delete the flutter directory entirely and re-clone or re-download the SDK. Running flutter doctor after a fresh install will guide you through any remaining setup steps.

Summary

In this lesson, you learned how to set up a complete Flutter development environment. You now know how to download and install the Flutter SDK, configure your system PATH, set up VS Code and Android Studio with the proper extensions and plugins, create and launch emulators for both Android and iOS, verify your installation with flutter doctor, and troubleshoot the most common setup issues. With your environment ready, you are prepared to start building Flutter applications.