Run Flutter Web Apps Inside VS Code with the Flutter Web Emulator Extension

Every Flutter web developer knows the rhythm: write code, save, switch to Chrome, wait for hot reload to propagate, check the result, switch back to VS Code. This context switch happens dozens of times per session. It doesn't sound like much, but the cognitive cost of context switching — re-establishing focus each time — is well documented in productivity research.

The Flutter Web Emulator extension eliminates this entirely.

What the Extension Does

The Flutter Web Emulator embeds a web browser panel directly inside VS Code as a tab. Your running Flutter web application renders there in real time. Your code is on one side; your app is on the other. You never leave the editor.

Key capabilities:

• Device simulation (iPhone, iPad, Pixel, and custom dimensions) — test responsive breakpoints without DevTools
• Works with Flutter's stateful hot reload
• Supports any localhost port
• No configuration file required

Install Flutter Web Emulator from the VS Code Marketplace

Setup in Three Steps

Step 1: Install the extension

In VS Code, open the Extensions panel (Ctrl+Shift+X), search "Flutter Web Emulator", and install the extension by Hafiz Rizwan Umar.

Step 2: Start your Flutter web application

flutter run -d web-server --web-port 8080

You can use any available port. Note the port number.

Step 3: Launch the emulator

Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on macOS), type "Flutter Web Emulator: Launch", and enter your local URL when prompted:

http://localhost:8080

The emulator panel opens. Drag it to the right split pane for the side-by-side layout.

Optimal VS Code Layout

The most effective setup is three columns:

1. Left: File explorer and Git panel
2. Centre: Code editor
3. Right: Flutter Web Emulator

View > Editor Layout > Three Columns sets this up in two clicks. The emulator panel occupies the right column; your active editor file is centre. With this layout, every UI change is immediately visible without any mouse movement.

Device Simulation

The toolbar within the emulator panel provides device presets:

• iPhone 14 (390 × 844)
• iPhone 14 Pro Max (430 × 932)
• iPad (768 × 1024)
• Pixel 7 (412 × 915)
• Custom (enter arbitrary dimensions)

Use this to catch responsive breakpoint issues during development rather than at review.

When This Matters Most

The extension is particularly valuable during:

• UI iteration sessions: Pixel-level padding and spacing adjustments that require many small changes
• Animation work: Seeing animation timing and easing in real time without a tab switch
• Responsive layout testing: Cycling through device sizes while editing breakpoint logic
• Client demos in-editor: Presenting work-in-progress to a client while explaining the code

Building Professional Flutter Web Applications

The Flutter Web Emulator was built by our team at Minderfly — it started as an internal tool and was published because it solved a genuine problem. Our Flutter development practice builds cross-platform applications (mobile, desktop, web) for clients globally.

See our Flutter development services or contact us about your next project.