IDE Setup (VS Code, Android Studio)

Popular IDEs for Flutter

🔹 VS Code Setup

Step-by-step guide to set up VS Code for Flutter:

Step 1: Install VS Code

Step 2: Install Flutter Extension

1. Open VS Code
2. Click Extensions icon (Ctrl+Shift+X)
3. Search "Flutter"
4. Click "Install" on Flutter extension
5. Dart extension installs automatically

Step 3: Verify Installation

# Open terminal in VS Code (Ctrl+`)
flutter doctor

# Expected output:
# [✓] Flutter (Channel stable, 3.x.x)
# [✓] Android toolchain
# [✓] VS Code (version x.x.x)

Step 4: Create First Project

1. Press Ctrl+Shift+P
2. Type "Flutter: New Project"
3. Select "Application"
4. Choose folder location
5. Enter project name (e.g., "my_first_app")
6. Wait for project creation

🔹 Essential VS Code Extensions

Recommended extensions for Flutter development:

🔹 VS Code Shortcuts

Speed up your development:

// Essential Shortcuts
Ctrl+Space          - Code completion
Ctrl+.              - Quick fix / Show actions
F12                 - Go to definition
Alt+F12             - Peek definition
Shift+F12           - Find all references
Ctrl+Shift+P        - Command palette
Ctrl+`              - Toggle terminal
Ctrl+B              - Toggle sidebar
F5                  - Start debugging
Shift+F5            - Stop debugging
Ctrl+F5             - Hot reload

// Code Editing
Ctrl+/              - Toggle comment
Alt+Up/Down         - Move line up/down
Shift+Alt+Up/Down   - Copy line up/down
Ctrl+D              - Select next occurrence
Ctrl+Shift+L        - Select all occurrences

🔹 Android Studio Setup

Complete setup guide for Android Studio:

Step 1: Install Android Studio

Step 2: Install Flutter Plugin

1. Open Android Studio
2. Go to File → Settings (Ctrl+Alt+S)
3. Select Plugins
4. Search "Flutter"
5. Click Install
6. Restart Android Studio

Step 3: Configure Android SDK

1. Go to File → Settings → Appearance & Behavior → System Settings → Android SDK
2. Ensure these are installed:
   - Android SDK Platform (latest)
   - Android SDK Build-Tools
   - Android SDK Command-line Tools
   - Android Emulator
3. Click Apply

Step 4: Create Virtual Device

1. Click Device Manager icon
2. Click "Create Device"
3. Select "Pixel 5" (recommended)
4. Choose system image (e.g., API 33)
5. Click Finish
6. Launch emulator

🔹 Android Studio Shortcuts

Boost productivity with keyboard shortcuts:

// Essential Shortcuts
Ctrl+Space          - Code completion
Alt+Enter           - Quick fix
Ctrl+B              - Go to declaration
Ctrl+Alt+B          - Go to implementation
Ctrl+Shift+F        - Find in files
Ctrl+Shift+A        - Find action
Shift+F10           - Run app
Shift+F9            - Debug app
Ctrl+\              - Hot reload
Ctrl+Shift+\        - Hot restart

// Code Navigation
Ctrl+N              - Find class
Ctrl+Shift+N        - Find file
Ctrl+E              - Recent files
Alt+F7              - Find usages

// Refactoring
Shift+F6            - Rename
Ctrl+Alt+M          - Extract method
Ctrl+Alt+V          - Extract variable

🔹 Running Your First App

Launch your Flutter app:

In VS Code:

# 1. Open project folder
# 2. Open lib/main.dart
# 3. Start device/emulator
# 4. Press F5 or click "Run" → "Start Debugging"

# Or use terminal:
flutter run

# For specific device:
flutter devices
flutter run -d chrome
flutter run -d emulator-5554

In Android Studio:

1. Open Flutter project
2. Wait for indexing to complete
3. Select device from dropdown (top toolbar)
4. Click green play button (▶)
5. Or press Shift+F10

# First run takes 2-5 minutes
# Subsequent runs are faster with Hot Reload

🔹 VS Code vs Android Studio

Choosing the right IDE:

🔹 Useful Settings

Optimize your IDE experience:

VS Code Settings (settings.json):

{
  "editor.formatOnSave": true,
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "dart.flutterSdkPath": "C:/flutter",
  "dart.previewFlutterUiGuides": true,
  "dart.debugExternalPackageLibraries": false,
  "dart.debugSdkLibraries": false,
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": false
  }
}

Android Studio Settings:

File → Settings:
- Editor → General → Auto Import → Optimize imports on the fly
- Editor → Code Style → Dart → Set from: Dart Style Guide
- Editor → Font → Size: 14
- Appearance → Theme → Darcula (dark mode)
- Plugins → Enable: Flutter, Dart, Rainbow Brackets

🔹 Troubleshooting

Common setup issues and solutions: