The Flutter web development workstation inside VS Code — device frames, hot reload, screenshot, network throttle, locale switcher, share preview & more.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Run Flutter Web inside VS Code — just like an Android/iOS emulator.
FlutterFrame embeds a realistic device-framed Flutter web preview directly inside your VS Code editor. No more switching to Chrome — preview your app in an iPhone, Pixel, iPad, or desktop viewport without leaving your code.
✨ Features
Feature
Description
📱 Device Frames
Realistic phone/tablet frames with bezels, notches, and dynamic islands
🔥 Hot Reload
One-click hot reload without leaving VS Code
🔄 Hot Restart
Full restart with state reset
📐 Responsive Mode
Instantly switch between mobile, tablet, and desktop viewports
🔃 Rotation
Portrait ↔ Landscape toggle
🔍 Zoom Controls
Scale the preview to fit your panel
📊 Status Bar
See running status at a glance
⚙️ Configurable
Custom port, default device, auto-start settings
🎨 Dark Theme
Seamlessly matches VS Code dark theme
💾 Auto Reload
Automatically hot reload when you save a .dart file
🚀 Quick Start
Open a Flutter project with web support in VS Code
Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Run FlutterFrame: Start Emulator
Your app will build and appear in a device frame panel!
📱 Device Presets
iPhone 15 Pro (393 × 852) — with Dynamic Island
iPhone SE (375 × 667)
Pixel 8 (412 × 915)
Samsung Galaxy S24 (360 × 780)
iPad Air (820 × 1180)
iPad Pro 12.9" (1024 × 1366)
Desktop HD (1440 × 900)
Desktop Full HD (1920 × 1080)
⌨️ Commands
Command
Description
FlutterFrame: Start Emulator
Start the Flutter web server and open the preview panel
FlutterFrame: Stop Emulator
Stop the running server and close the preview
FlutterFrame: Hot Reload
Trigger a hot reload
FlutterFrame: Hot Restart
Trigger a hot restart
FlutterFrame: Select Device
Switch between device presets
⚙️ Settings
Setting
Default
Description
flutterframe.defaultDevice
iPhone 15 Pro
Default device preset
flutterframe.port
8686
Port for the Flutter web server
flutterframe.autoReload
true
Auto hot reload on .dart file save
flutterframe.showStatusBar
true
Show status bar items
flutterframe.zoomLevel
75
Default zoom level (25–150%)
📋 Requirements
VS Code 1.85.0 or newer
Flutter SDK installed and on your PATH
A Flutter project with web support enabled (flutter create --platforms=web)
🐛 Known Issues
WebView sandboxing may prevent some browser APIs from working inside the iframe
Very large Flutter web apps may take longer to build on the first run
