Skip to content
Primio Docs

Live Preview

The preview panel shows a real-time Flutter web build of your app inside a device mockup. Every time the AI makes a change, the preview refreshes automatically — no manual reload needed.

How it works

Section titled “How it works”

The right side of the workspace displays your running app in an iframe. As the AI writes and modifies Flutter code, the app is rebuilt and the preview updates to show the latest version. You can interact with it directly: tap buttons, navigate between screens, scroll lists, and fill in forms.

On desktop, the preview sits inside a code-generated device frame with platform-appropriate chrome — iOS devices show a Dynamic Island status bar, Android devices show a status bar with time, signal, WiFi, and battery icons plus a three-button navigation bar. On mobile, the preview runs full-screen without the frame.

Device viewports

Section titled “Device viewports”

The preview toolbar lets you switch between viewport sizes that match real device dimensions:

  • iPhone 16 Pro Max (440×956) — required for App Store screenshots (produces 1320×2868 at 3× native scale)
  • Galaxy S25 (360×780) — popular Android phone
  • Pixel 9 (412×915) — Google’s reference Android device
  • iPad Air 13” (1032×1376) — required for App Store iPad screenshots (produces 2064×2752 at 2× native scale)
  • Landscape — rotates whichever device is selected
  • Desktop — full browser-width view

These devices were chosen to match App Store and Google Play screenshot size requirements, so you can capture store-ready screenshots directly from the preview.

Actual size toggle

Section titled “Actual size toggle”

A button in the top-right corner of the preview switches between two modes:

  • Fit mode (default) — the device frame scales to fill the available panel space
  • 1:1 mode — the device renders at its true logical resolution; scroll to see parts that extend beyond the panel

Use 1:1 mode when you need pixel-accurate inspection of your layout.

Screenshot capture

Section titled “Screenshot capture”

Click the camera button — on desktop it’s a floating button in the bottom-right corner of the preview area, on mobile it’s in the preview toolbar. A context menu appears with two options:

  • Save to disk — downloads the screenshot as an image file at the device’s native resolution (3× for phones, 2× for iPad), producing dimensions that match App Store and Google Play requirements. For example, iPhone 16 Pro Max saves at 1320×2868px — exactly what Apple requires for the 6.9” display.
  • Add to prompt — on desktop, opens an area selection tool where you drag to select a region and click Use selection to attach it. On mobile, the full screenshot is attached instantly.

This serves two purposes: pointing the AI at specific UI issues (“See this section? Move it below the header”) and capturing store-ready screenshots for your app listing without needing a real device.

Test on a real phone

Section titled “Test on a real phone”

Click the mobile preview button (monitor+phone icon) in the preview panel to open a QR code. Scan it with your phone to open your app’s live web preview in a mobile browser — no build required.

This is the fastest way to check touch interactions, layout, and animations on a real device. The preview updates as the AI makes changes, just like on desktop.

Preview vs real device

Section titled “Preview vs real device”

Use the preview for:

  • Checking layouts, colors, and typography
  • Testing navigation flow between screens
  • Verifying design iterations quickly
  • Reviewing text and content changes

Use a real device for:

  • Camera and photo library features
  • GPS and location services
  • Push notifications
  • Bluetooth, NFC, and other hardware APIs
  • Performance testing and animation smoothness
  • Final QA before app store submission

Next steps

Section titled “Next steps”