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.
✨ 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.
🎮 Controls
Control
Description
Reload Button
Initiates a hot reload of your Flutter app.
Rotate Button
Toggles between portrait and landscape orientations.
Device Dropdown
Choose from professional device presets.
Home Button
Simulates a Home button press.
Back Button
Simulates a Back button press.
Recent Apps Button
Simulates a Recent Apps button press.
Power Button
Toggles screen on/off (visual only).
Volume Buttons
Displays volume indicators (visual only).
⌨️ 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.
📱 Professional Device Presets
Device
Dimensions (px)
Pixel Ratio
Description
iPhone 14
390 x 844
3x
Modern iOS smartphone
Pixel 7
412 x 915
2.6x
Android flagship device
iPad
820 x 1180
2x
Ideal for tablet-based testing
🐞 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.
