Flutter & Dart Support

Lumide provides comprehensive, native tooling for Dart development and Flutter applications powered by the lumide_flutter plugin and the built-in Dart Language Server (dart-lsp).

Overview of Features#

• Dart Language Server (LSP): Real-time diagnostics, completions, hover docs, go-to-definition, and widget refactoring actions.
• Execution & Debugging (DAP): Run, Debug, and Attach modes with Dart VM Service integration (breakpoints, stepping, stack frames, and expression evaluation).
• Hot Reload & Hot Restart: Dedicated shortcuts (Cmd + \ / Cmd + Shift + \), toolbar controls, and automatic Hot Reload on Save.
• Flutter Widget Preview: Side-by-side live preview pane for @Preview widgets (Flutter 3.47+).
• Embedded Dart DevTools & Inspector: In-IDE webview panels for Widget Inspector, Performance, CPU Profiler, Memory, Network, and Logging.
• Widget Source Navigation: Click any widget on an emulator/device screen to jump directly to its code in Lumide.
• Device & Emulator Management: Live daemon device detection, Android Virtual Device (AVD) launching, and Apple iOS Simulator startup.
• Launch Configurations: Full compatibility with .vscode/launch.json entries (type: "dart"), variable substitution, and tool arguments (--dart-define).
• Flavors & Build Modes: Dedicated pickers for build modes (debug, profile, release) and custom flavors.
• Project Scaffolding & Quick Tools: Interactive project creation wizard, snake_case Dart file creation, workspace-wide pub get all, and file tree context actions.
• SDK Management: Seamless support for FVM, Puro, system SDKs, and built-in release installation.

Analysis & Language Intelligence#

Dart support in Lumide runs via dart language-server --protocol=lsp using the active Dart SDK resolved for your workspace:

• Analysis & Code Completion: Full type inference, documentation tooltips, auto-imports, and parameter hints.
• Automatic Pub Get: Saving pubspec.yaml automatically runs flutter pub get or dart pub get in the background.
• Code Actions & Fixes: Automatic diagnostics from analysis_options.yaml and quick-fixes via the editor lightbulb or keyboard shortcuts.

Widget Refactoring (Option + Enter / Alt + Enter)#

Place the cursor on any Widget class name and press Option + Enter (macOS) or Alt + Enter (Windows/Linux) (or Cmd + . / Ctrl + . in the VS Code keymap preset):

• Wrap with Widget / Padding / Center / Row / Column / Builder / Container / SizedBox: Encloses the widget in a layout container with proper comma formatting.
• Remove Widget: Removes a container widget while preserving its child subtree.
• Convert to StatefulWidget / StatelessWidget: Toggles widget statefulness and automatically generates the accompanying State<T> class.

Running & Debugging#

Lumide supports three execution modes from the toolbar, Launch dropdown, or command palette:

Debug Features (VM Service Integration)#

When running in Debug mode, Lumide connects directly to the Dart VM Service (vm_service):

• Breakpoints: Add or remove line breakpoints in Dart files. Breakpoints resolve dynamically when the isolate loads.
• Execution Stepping: Continue, Pause, Step Over, Step Into, and Step Out.
• Stack Frames & Scopes: Inspect the call stack across isolates and browse local and global variable scopes.
• Expression Evaluation: Evaluate Dart expressions at the paused frame directly from the debug console.
• Exception Pause Modes: Toggle pause behavior for exceptions: None, Unhandled Exceptions, or All Exceptions.

Single File Launch (CodeLens)#

You can launch any standalone Dart file or script directly via CodeLens or the Flutter: Launch File (flutter.runFile) command.

Hot Reload & Hot Restart#

Lumide includes integrated Hot Reload and Hot Restart with dedicated keybindings and toolbar buttons:

Hot Reload on Save#

By default, saving any .dart file while an app is running triggers an automatic Hot Reload (flutter.hotReloadOnSave: true).

Terminal Console Shortcuts#

When running Flutter directly in an integrated terminal tab:

• Press r to Hot Reload.
• Press R to Hot Restart.

Flutter Widget Preview#

Lumide features native integration with Flutter's official Widget Preview tool (available in Flutter 3.47 and newer):

• Command: Flutter: Open Widget Preview (flutter.showWidgetPreview)
• Add Pane Menu: Open from the pane options via Flutter Widget Preview.
• How it works: Spawns flutter widget-preview start --machine --web-server and hosts the preview application inside a dedicated right-docked Lumide pane.
• Usage: Annotate widgets with @Preview in your Flutter code to see isolated, live-updating previews side by side with your code.

Dart DevTools & Widget Inspector#

Lumide provides deep integration with Dart DevTools, allowing you to open individual tooling screens directly inside embedded Lumide webview panes:

You can also open the full DevTools suite inside Lumide via Flutter: Open DevTools (flutter.openDevToolsWebview) or externally in your default system browser with Flutter: Open DevTools (Browser) (flutter.openDevTools).

Click-to-Source Navigation (Toggle Widget Selection)#

Run Flutter: Toggle Widget Selection (flutter.toggleWidgetInspector):

• Click any widget in your running app on an Android/iOS emulator, desktop window, or web browser.
• Lumide immediately intercepts the selection and jumps to the exact source file and line where that widget was created.

Performance Overlay#

Run Flutter: Toggle Performance Overlay (flutter.togglePerformanceOverlay) to toggle the visual GPU and UI thread performance graphs on top of your running application.

Device & Emulator Management#

Lumide uses the Flutter daemon (flutter daemon) to maintain a real-time list of available targets:

• Device Selection: Click the device item in the status bar or run Flutter: Select Device (flutter.selectDevice).
• Target Types: Supports physical iOS/Android devices, macOS/Windows/Linux desktop apps, and Google Chrome web targets.
• Android Virtual Devices (AVD): Lists stopped Android emulators and lets you boot them directly (emulator:id).
• iOS Simulator (macOS): Run Start iOS Simulator from the device picker to boot Apple's Simulator and automatically connect to it.
• Hot-Plug Notifications: Automatically detects newly connected devices or disconnected targets in real time.
• Rescan: Select Refresh Devices... from the picker to re-query the daemon and shell for available devices.

Target Entry Point Selection#

Lumide automatically detects target entry points:

• Defaults to lib/main.dart or other .dart files under lib/ and bin/.
• Switch targets using Flutter: Select Target (flutter.selectTarget) or the target picker on the toolbar.
• Set as Flutter Target: Right-click any Dart file in the file explorer tree and select Set as Flutter Target (flutter.context.setTarget).
• Active target selections are persisted across IDE sessions in .dart_tool/lumide/target.txt.

Launch Configurations (.vscode/launch.json)#

Lumide provides full compatibility with .vscode/launch.json configurations where "type": "dart" and "request": "launch".

Example .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "App (Staging)",
      "type": "dart",
      "request": "launch",
      "program": "lib/main_staging.dart",
      "flutterMode": "debug",
      "flavorName": "staging",
      "toolArgs": [
        "--dart-define", "API_URL=https://staging.example.com",
        "--dart-define", "ENABLE_FEATURE_X=true"
      ],
      "args": ["--verbose"],
      "env": {
        "CUSTOM_VAR": "value"
      }
    }
  ]
}

Supported Properties#

• program: Path to the Dart entry point.
• flutterMode: Build mode (debug, profile, release).
• flavorName: Passed as --flavor to flutter run.
• toolArgs: Custom arguments passed between flutter run and -t (e.g., --dart-define).
• args: Arguments passed to the application's main() function.
• env: Environment variables injected into the running process.
• cwd: Custom working directory override.
• deviceId: Dedicated device override.

Dynamic Variable Substitution#

Lumide dynamically evaluates VS Code variables in launch.json:

• ${workspaceFolder}: Path to the workspace root.
• ${file}: Active document path.
• ${fileBasename} / ${fileBasenameNoExtension}: Active filename with or without extension.
• ${fileDirname}: Directory of the active file.
• ${lineNumber}: Current line number in the active editor.
• ${selectedText}: Current text selection.
• ${env:NAME}: Environment variable lookup.

Flavors, Build Modes & Tool Arguments#

You can adjust runtime parameters dynamically without editing files:

• Flutter Flavor: Run Flutter: Set Flavor (flutter.setFlavor) or use the Launch configuration panel to specify an active flavor (e.g. dev, staging, prod). Persisted in .dart_tool/lumide/flavor.txt.
• Build Mode: Run Flutter: Set Build Mode (flutter.setBuildMode) to toggle between Debug (default with hot reload), Profile (--profile), and Release (--release).
• Tool Arguments: Set custom command-line flags (e.g., --dart-define KEY=VALUE) via toolArgs.

Project Scaffolding & Quick Tools#

Interactive Project Creation Wizard (flutter.create)#

Run Flutter: New Project from the command palette or right-click a folder in the file tree and select Create Flutter Project Here:

1. Project Name: Enforces valid lowercase Dart package naming (my_app).
2. Template: Choose between App (default application), Empty App (--empty), Package (--template package), Plugin (--template plugin), or Module (--template module).
3. Platforms: Choose All Platforms, Mobile (android,ios), Web (web), or Desktop (macos,windows,linux).
4. Organization: Reverse-domain notation identifier (e.g., com.example).
5. Pub Get: Choose whether to run pub get immediately or skip (--no-pub).

New Dart File (flutter.context.newDartFile)#

Right-click any directory in the file explorer and select New Dart File:

• Enter relative paths (e.g., models/auth/user).
• Automatically enforces lower_snake_case naming and appends .dart.
• Creates missing parent directories automatically and opens the new file in the editor.

Flutter Tools Menu (flutter.tools)#

Access common developer actions via Flutter: Tools Menu:

• Widget Preview: Quick shortcut to launch the widget preview pane.
• Pub Get: Run flutter pub get in the active project.
• Clean: Run flutter clean in the active project.
• Pub Get All: Scans multi-package workspaces and runs flutter pub get across all nested packages.
• Doctor: Run flutter doctor and view formatted output in the Flutter output channel.
• DevTools Shortcuts: Instant shortcuts to open any DevTools page or toggle the widget inspector.

SDK Management (FVM, Puro & System SDKs)#

The lumide_flutter plugin registers a native SDK provider (flutter) with Lumide's SDK Manager:

• Automatic Discovery:
  • FVM: Detects workspace-pinned versions via .fvm/fvm_config.json or .fvmrc, as well as global versions in ~/.fvm/versions.
  • Puro: Detects workspace-pinned environments via .puro.json and global environments in ~/.puro/envs.
  • System PATH: Automatically detects system installations via which flutter / where flutter.
  • Managed SDKs: Direct installation of Flutter releases from official Google Cloud Storage repositories with SHA-256 verification.
• Seamless Switching: Changing the active Flutter SDK automatically restarts the Flutter daemon, updates device lists, refreshes launch configurations, and updates the Dart LSP server without restarting the IDE.

Plugin Settings & Configuration#

Configure Flutter behavior in Lumide settings (settings.json):

Next Steps#

• SDK Manager — Manage and install Dart and Flutter SDK versions.
• Code Completion — Intelligent autocompletion and snippets.
• Diagnostics & Problems — Real-time error detection and problem view.
• C.O.R.G.I. Git Client — Visual Git workflow.