How to setup Flutter with VSCode Step By Step Guide

Here’s a step-by-step guide to setting up Flutter with VS Code on your computer (Windows, macOS, or Linux).

🧩 Step 1: Install Flutter SDK

🔹 Windows

Go to the official Flutter website: https://docs.flutter.dev/install/manual
Download the Flutter SDK (Windows .zip) file.
Extract it to a desired location — e.g.: C:\src\flutter
Add Flutter to your PATH:
- Search “Edit environment variables” in the Start menu.
- Under System variables, select Path → Edit → New → add: C:\src\flutter\bin
- Click OK to save.

🔹 macOS

Download the latest stable release from Flutter’s site.
Extract the file: unzip ~/Downloads/flutter_macos_<version>.zip
Move it to a desired location: sudo mv flutter /usr/local/flutter
Add Flutter to your PATH (add this line to your ~/.zshrc or ~/.bashrc): export PATH="$PATH:/usr/local/flutter/bin"
Run: source ~/.zshrc

🔹 Linux

Download Flutter SDK: wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_<version>-stable.tar.xz
Extract: tar xf flutter_linux_<version>-stable.tar.xz
Move and add to PATH: sudo mv flutter /opt/flutter echo 'export PATH="$PATH:/opt/flutter/bin"' >> ~/.bashrc source ~/.bashrc

🧰 Step 2: Check Flutter Installation

Run this command to verify your setup:

flutter doctor

It checks:

Flutter SDK
Dart SDK
Connected devices
VS Code or Android Studio
Platform tools (Android/iOS)

If anything shows as missing, it will guide you on how to fix it.

🧱 Step 3: Install VS Code

Download VS Code: https://code.visualstudio.com
Install it normally for your OS.
Open VS Code.

🧩 Step 4: Install Flutter & Dart Extensions

In VS Code:

Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X).
Search for:
- Flutter
- Dart
Click Install on both.

When Flutter is installed, Dart is usually installed automatically.

🧰 Step 5: Install Android Studio (for Emulator & SDK)

You’ll need Android Studio (even if you use VS Code) for the Android SDK and emulator.

Download from: https://developer.android.com/studio
During installation, check:
- Android SDK
- Android Virtual Device
After installation:
- Open Android Studio → Settings → SDK Manager
- Ensure an SDK version is installed (e.g. Android 14.0).
- Enable “Android SDK Command-line Tools”.
Accept all licenses: flutter doctor --android-licenses

📱 Step 6: Set Up an Emulator or Device

Android Emulator

Open Android Studio → AVD Manager.
Create a new virtual device (e.g., Pixel 6).
Choose a system image and finish setup.
Launch the emulator.

Physical Device

Enable Developer options → USB Debugging on your phone.
Connect via USB and confirm connection.

Check devices:

flutter devices

🚀 Step 7: Create and Run a Flutter App

In VS Code terminal:

flutter create my_app
cd my_app
flutter run

Or use Run → Start Debugging (F5) in VS Code.

🧾 Step 8: Verify Everything

Run:

flutter doctor -v

Make sure all checks have ✅.

✅ Optional Setup

iOS (Mac only)

Install Xcode from the App Store.
Run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch
Then: flutter doctor

Login

Register