Effortlessly run and test Flutter web apps in a customizable, phone-like emulator within VS Code, featuring hot reload, device rotation, and preset configurations for seamless mobile development.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
A powerful VS Code extension that delivers a realistic, phone-like interface for previewing and testing Flutter web applications directly within Visual Studio Code. Streamline your development workflow with an intuitive emulator designed for Flutter developers.
Demo
✨ Features
Realistic Phone Interface
Emulates a mobile device with navigation buttons, status bar, and hardware controls for an authentic testing experience.
Hot Reload Support
Experience real-time updates with Flutter's experimental web hot reload, enabling rapid development cycles.
Professional Device Presets
Select from meticulously crafted device configurations, including modern smartphones and tablets.
Device Rotation
Seamlessly switch between portrait and landscape orientations to ensure responsive design.
Interactive Controls
Simulate home, back, and recent apps button presses to test app navigation and behavior.
Touch Simulation
Supports ripple effects and multi-touch gesture simulation for a natural user experience.
⚙ Requirements
Flutter SDK with web support enabled.
Visual Studio Code version 1.99.0 or higher.
📦 Installation
Obtain the .vsix package from the Marketplace or official source.
Open the Extensions View in VS Code (Ctrl+Shift+X or Cmd+Shift+X on macOS).
Click the ... menu in the top-right corner.
Select Install from VSIX... and choose the downloaded file.
🚀 Usage
Open a Flutter project with web support enabled.
Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
Run: Flutter Web Emulator: Start.
The emulator will launch in a new panel, automatically running your Flutter web app.
⌨️ Keyboard Shortcuts
Ctrl+R or Cmd+R: Triggers hot reload when editing .dart files.
⚙️ Extension Settings
Setting
Description
flutterWebEmulator.devicePresets
Curated device configurations for responsive testing.
flutterWebEmulator.defaultDevice
Set the default device for the emulator.
flutterWebEmulator.autoReload
Enable or disable auto reload on file save.
flutterWebEmulator.experimentalHotReload
Toggle experimental web hot reload.
flutterWebEmulator.customFlags
Add custom flags for the Flutter development server.
🐞 Known Issues
Hot reload for Flutter web is experimental and may have inconsistencies.
Some Flutter plugins may have limited functionality in web mode.
This emulator is a simulation and may not fully replicate physical device behavior.
