Educational

Installing VS Code

—

by

Saim Khalid
in

Introduction

When starting Flutter development, one of the first choices developers make is selecting the right code editor or IDE. Google officially recommends Android Studio and Visual Studio Code (VS Code). While Android Studio is a complete IDE with many built-in tools, it is also heavy on system resources. On the other hand, Visual Studio Code (VS Code), developed by Microsoft, is a lightweight, fast, and highly extensible code editor—making it the preferred choice for many Flutter developers.

This article provides a step-by-step guide to installing VS Code for Flutter development. We’ll cover:

  • Why choose VS Code for Flutter.
  • System requirements.
  • How to install VS Code on Windows, macOS, and Linux.
  • Setting up Flutter and Dart extensions.
  • Configuring PATH variables.
  • Running your first Flutter project.
  • Best practices for using VS Code effectively.

By the end, you’ll be fully ready to code Flutter apps using VS Code.

Why VS Code for Flutter?

Developers often ask: “Should I use Android Studio or VS Code for Flutter?” Both are excellent choices, but VS Code has specific advantages:

1. Lightweight and Fast

  • VS Code is much smaller in size compared to Android Studio.
  • Consumes fewer system resources (RAM, CPU).

2. Cross-Platform

  • Runs smoothly on Windows, macOS, and Linux.

3. Extensions Ecosystem

  • Thousands of extensions available for Flutter, Dart, Git, themes, debugging, and productivity tools.

4. Beginner-Friendly

  • Easy to install and set up.
  • Intuitive interface with minimal distractions.

5. Integrated Tools

  • Built-in terminal for running flutter commands.
  • Git and version control support.
  • Debugger and IntelliSense.

System Requirements

Windows

  • Windows 10 or higher (64-bit).
  • At least 2 GB RAM (4 GB recommended).
  • 1.5 GB free disk space.

macOS

  • macOS 10.14 Mojave or later.
  • Intel or Apple Silicon processor.
  • 2 GB RAM (4 GB recommended).

Linux

  • Ubuntu, Fedora, or Debian-based distributions.
  • 64-bit processor.
  • GLIBC 2.15 or later.

Installing VS Code

Step 1: Download VS Code

  1. Go to the official website: https://code.visualstudio.com.
  2. Download the installer for your operating system (Windows/macOS/Linux).

Step 2: Install on Windows

  1. Run the .exe installer.
  2. Accept the license agreement.
  3. Choose installation location.
  4. Select “Add to PATH” (recommended).
  5. Complete installation.

Step 3: Install on macOS

  1. Download the .dmg file.
  2. Drag Visual Studio Code.app to Applications folder.
  3. Open VS Code from Applications.

Step 4: Install on Linux

For Ubuntu/Debian:

sudo apt update
sudo apt install software-properties-common apt-transport-https wget
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
sudo apt install code

Setting Up Flutter and Dart Extensions

  1. Open VS Code.
  2. Go to Extensions (sidebar icon or press Ctrl+Shift+X).
  3. Search for Flutter → Install.
    • This will automatically install the Dart extension.
  4. Restart VS Code to apply changes.

Configuring Flutter SDK Path

  1. Download Flutter SDK from flutter.dev.
  2. Extract it to a folder, e.g., C:\src\flutter (Windows).
  3. Add flutter\bin to PATH.

On Windows

  • Search for Environment Variables.
  • Edit PATH → Add C:\src\flutter\bin.

On macOS/Linux

Add to ~/.zshrc or ~/.bashrc:

export PATH="$PATH:/path-to-flutter-sdk/bin"

Then run:

source ~/.zshrc

Verify Installation

Run:

flutter doctor

This command checks setup and lists missing dependencies.

Creating Your First Flutter Project in VS Code

  1. Open VS Code.
  2. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
  3. Type Flutter: New Project.
  4. Select Application.
  5. Choose a folder location.
  6. Enter project name (e.g., my_first_app).
  7. VS Code generates boilerplate Flutter project files.

Running the Project

  1. Connect an emulator or physical device.
  2. Open the built-in terminal in VS Code.
  3. Run:
flutter run
  1. The app launches on the device/emulator.

Useful VS Code Extensions for Flutter

  • Flutter & Dart – Essential tools.
  • Flutter Tree – Visualize widget tree.
  • Bracket Pair Colorizer – Makes code more readable.
  • GitLens – Advanced Git integration.
  • Material Icon Theme – Better UI for file explorer.

Debugging in VS Code

  • Set breakpoints directly in the editor.
  • Use Run and Debug tab.
  • Inspect variables and watch expressions.
  • Use Hot Reload and Hot Restart buttons for instant updates.

Best Practices for Using VS Code with Flutter

  1. Always keep Flutter SDK updated.
  2. Use keyboard shortcuts for efficiency.
  3. Organize code with proper folder structure.
  4. Install only necessary extensions (too many slow down performance).
  5. Use VS Code integrated terminal for flutter and git commands.

Common Issues and Fixes

Issue 1: Flutter Not Found in VS Code

  • Ensure SDK path is correctly set in Environment Variables.
  • Run flutter doctor to troubleshoot.

Issue 2: Emulator Not Detected

  • Install Android SDK or use iOS Simulator.
  • Run flutter devices to check connected devices.

Issue 3: Extensions Not Working

  • Restart VS Code after installing Flutter & Dart extensions.

Advantages of VS Code for Flutter Development

  1. Lightweight and fast.
  2. Cross-platform.
  3. Simple UI and beginner-friendly.
  4. Highly customizable with extensions.
  5. Integrated Git and terminal support.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *