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

1. Go to the official Flutter website: https://docs.flutter.dev/install/manual
2. Download the Flutter SDK (Windows .zip) file.
3. Extract it to a desired location — e.g.: C:\src\flutter
4. 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

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

🔹 Linux

1. Download Flutter SDK: wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_<version>-stable.tar.xz
2. Extract: tar xf flutter_linux_<version>-stable.tar.xz
3. 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

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

🧩 Step 4: Install Flutter & Dart Extensions

In VS Code:

1. Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X).
2. Search for:
   • Flutter
   • Dart
3. 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.

1. Download from: https://developer.android.com/studio
2. During installation, check:
   • Android SDK
   • Android Virtual Device
3. 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”.
4. Accept all licenses: flutter doctor --android-licenses

📱 Step 6: Set Up an Emulator or Device

Android Emulator

1. Open Android Studio → AVD Manager.
2. Create a new virtual device (e.g., Pixel 6).
3. Choose a system image and finish setup.
4. 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