IDE Setup — VS Code & Android Studio

A great Integrated Development Environment (IDE) transforms coding from a chore into a pleasure. With the right setup, you get intelligent code completion, real-time error highlighting, integrated debugging, and one-click formatting. In this lesson, we'll configure VS Code and Android Studio for Dart development — plus introduce DartPad as a zero-installation alternative.

---

Option 1: VS Code (Recommended for Beginners)

Visual Studio Code is a lightweight, free, and highly extensible editor made by Microsoft. It's the most popular choice for Dart and Flutter developers.

Step 1 — Download and Install VS Code

1. Go to https://code.visualstudio.com
2. Download the installer for your OS (Windows / macOS / Linux)
3. Run the installer and follow the prompts
4. Launch VS Code when done

Step 2 — Install the Dart Extension

The Dart extension is the heart of your Dart development setup in VS Code.

1. Open VS Code
2. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS) to open Extensions
3. Search for "Dart"
4. Click Install on the extension by Dart Code (publisher: dart-code)

Step 3 — Install the Flutter Extension (Optional but Recommended)

Even if you're learning Dart before Flutter, the Flutter extension adds extra tooling that works well with Dart.

1. In Extensions, search for "Flutter"
2. Click Install on the extension by Dart Code

Step 4 — Configure settings.json for Dart

VS Code's settings can be customized per-project or globally. Let's set up ideal Dart defaults.

Open the Command Palette with Ctrl+Shift+P (or Cmd+Shift+P), type "Open User Settings (JSON)", and add:

json
{
  // Dart-specific settings
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [80],
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  },

  // Dart SDK path (only needed if not auto-detected)
  // "dart.sdkPath": "C:/dart-sdk",

  // Show type annotations inline
  "dart.inlayHints": true,

  // Line length for dart format
  "dart.lineLength": 80,

  // Enable closing labels for widgets/constructors
  "dart.closingLabels": true,

  // Preview flutter outline in sidebar
  "dart.flutterOutline": true
}

Essential VS Code Keyboard Shortcuts for Dart

Action	Windows/Linux	macOS
Format document	Shift+Alt+F	Shift+Option+F
Go to definition	F12	F12
Find all references	Shift+F12	Shift+F12
Rename symbol	F2	F2
Quick fix / code actions	Ctrl+.	Cmd+.
Toggle terminal	Ctrl+`	Ctrl+`
Command Palette	Ctrl+Shift+P	Cmd+Shift+P
Run without debug	Ctrl+F5	Cmd+F5
Start debugging	F5	F5

Step 5 — Verify VS Code Setup

Create a file called hello.dart and type:

dart
void main() {
  print('VS Code Dart setup is working!');
}

You should see:

• Syntax highlighting (colorful code)
• No red underlines (no errors)

Press F5 or open the terminal and run:

bash
dart run hello.dart

---

Option 2: Android Studio / IntelliJ IDEA

Android Studio (built on IntelliJ IDEA) is a full-featured IDE, especially powerful for Flutter and Android projects. If you plan to build mobile apps, this is a great choice.

Step 1 — Download Android Studio

1. Go to https://developer.android.com/studio
2. Download and install Android Studio for your OS
3. Complete the initial setup wizard (you can skip Android SDK install for now if you're Dart-only)

Step 2 — Install the Dart Plugin

1. Open Android Studio
2. Go to File → Settings (Windows/Linux) or Android Studio → Preferences (macOS)
3. Navigate to Plugins
4. Search for "Dart"
5. Click Install and restart Android Studio

Step 3 — Install the Flutter Plugin (Optional)

1. In the same Plugins screen, search for "Flutter"
2. Click Install
3. Restart Android Studio

Step 4 — Configure Dart SDK in Android Studio

After installing the plugin:

1. Go to File → Settings → Languages & Frameworks → Dart
2. Check Enable Dart support for the project
3. Set the Dart SDK path (e.g., C:\dart-sdk on Windows, /usr/lib/dart on Linux)
4. Click Apply → OK

Android Studio Features for Dart

Feature	Description
Smart completion	Context-aware suggestions as you type
Parameter hints	Shows parameter names inline
Refactoring tools	Rename, extract method, introduce variable
Integrated debugger	Breakpoints, watch expressions, call stack
Dart Analysis	Real-time error and lint checking
Code formatting	Ctrl+Alt+L applies dart format
Structure view	See all classes/methods in sidebar

Essential Android Studio Shortcuts

Action	Windows/Linux	macOS
Format code	Ctrl+Alt+L	Cmd+Option+L
Go to definition	Ctrl+B	Cmd+B
Find usages	Alt+F7	Option+F7
Rename	Shift+F6	Shift+F6
Quick fix	Alt+Enter	Option+Enter
Run	Shift+F10	Ctrl+R
Debug	Shift+F9	Ctrl+D

---

Option 3: DartPad — No Installation Required

DartPad is an official online Dart editor from the Dart team. It runs entirely in your browser — no installation needed.

🌐 URL: https://dartpad.dev

What DartPad Offers

• Run Dart code instantly in the browser
• Test Flutter widgets with the Flutter toggle
• Share code via URL with colleagues
• Access built-in samples and tutorials
• See console output, errors, and documentation

Limitations of DartPad

Limitation	Details
No file system access	Can't read/write files
No package imports	Only core Dart + some approved packages
Single file only	Can't manage multi-file projects
Requires internet	No offline use
Performance	Slightly slower than native

When to Use DartPad

• Quickly testing a Dart snippet
• Sharing code examples with others
• Learning Dart without any setup
• Experimenting with concepts

---

Recommended Extensions & Plugins Summary

VS Code Extensions

Extension	Purpose	Install
Dart	Core Dart support	Required
Flutter	Flutter + enhanced Dart	Highly recommended
Error Lens	Inline error messages	Optional
Bracket Pair Colorizer	Color-matched brackets	Optional
GitLens	Git history in editor	Optional
Pubspec Assist	Easy package.yaml management	Optional

Android Studio / IntelliJ Plugins

Plugin	Purpose
Dart	Core Dart language support
Flutter	Flutter framework integration
Rainbow Brackets	Color-coded bracket pairs
String Manipulation	Handy string tools

---

Summary

In this lesson, you set up your Dart development environment with:

• VS Code — Dart extension, Flutter extension, settings.json for format-on-save and line length, keyboard shortcuts
• Android Studio — Dart plugin, Flutter plugin, SDK path configuration, and power-user shortcuts
• DartPad — The zero-setup browser-based Dart editor for quick experiments