How to Create Stunning Demo Videos for Your Flutter App

Flutter lets you ship a single codebase to iOS, Android, web, and desktop. But when it comes time to show your app to the world, a handful of screenshots rarely does it justice. A polished demo video brings your UI to life, highlights silky-smooth animations, and proves that your cross-platform code actually runs on real devices.

This guide walks through the full workflow: capturing your Flutter app on both iOS Simulator and Android Emulator, recording from a physical device over USB, wrapping the footage in photorealistic 3D device frames, editing for impact, and exporting files that meet Apple and Google's exact specifications.

Why Your Flutter App Needs a Demo Video

The average user spends only a few seconds scanning an App Store listing before deciding to download or move on. A demo video is your best chance to capture attention in that narrow window. It communicates value faster than any bullet list of features ever could.

For Flutter developers specifically, a demo video solves a unique marketing challenge: proving that your cross-platform app feels genuinely native on each platform. Static screenshots cannot convey gesture-driven animations, page transitions, or the 60-fps smoothness that Flutter is known for. Video can.

Here is why investing time in a demo video pays off:

• App Store conversion. Apple prominently features preview videos at the top of every listing. Apps with preview videos consistently see higher tap-through rates.
• Play Store visibility. Google Play supports promotional videos and often gives video-enabled listings more weight in search results.
• Social proof and sharing. A short, loopable clip performs far better on Twitter/X, LinkedIn, and Product Hunt than a carousel of images.
• Investor and stakeholder demos. Nothing communicates product quality like a real recording running inside a realistic device mockup.

Recording Flutter on iOS Simulator

If you are developing on a Mac, the iOS Simulator is the quickest way to capture your Flutter app running in an Apple environment. You have two main approaches: the built-in xcrun simctl command, or a dedicated screen-recording tool like SmoothCapture.

The command-line approach

Xcode ships with xcrun simctl io booted recordVideo output.mp4. It works, but the output is a raw, frameless video of the simulator content area. You will need to separately composite a device frame in a video editor, match the exact resolution, and handle timing manually. For a quick internal recording it is fine; for anything public-facing, it is a lot of extra work.

The SmoothCapture approach

SmoothCapture detects the iOS Simulator window automatically. Select the Simulator as your recording source, hit record, and you get a high-quality capture of the app in motion. Because SmoothCapture records the actual window, it captures everything your users would see: status bar, home indicator, and system overlays included.

After recording, you can apply a 3D iPhone device frame directly inside SmoothCapture without leaving the app. The frame is composited in real time, so you can preview the final look before exporting.

Tips for a clean Simulator recording

• Run flutter run in release mode (--release) so performance matches a real device and the debug banner disappears.
• Set the Simulator to the device size that matches your target App Store preview (e.g., iPhone 15 Pro Max for the 6.7-inch slot).
• Reset the Simulator before recording to clear notification badges and stale state.

Recording Flutter on Android Emulator

Android Studio's emulator has a built-in screen-record button, but it outputs a raw video without any device chrome. For marketing material, that bare rectangle is not impressive on its own.

With SmoothCapture, you can capture the Android Emulator window just like any other macOS window. Select the emulator from the window picker, record your Flutter app in action, then apply a Pixel or Galaxy device frame in post-production. The recording captures the full emulator viewport, and SmoothCapture's frame system maps it onto a photorealistic 3D device model.

Getting the best results from the emulator

• Use a Pixel device profile in AVD Manager so the aspect ratio and resolution match the device frame you will apply later.
• Hide the emulator toolbar (Extended Controls > Settings > Hide toolbar) for a cleaner capture area.
• As with iOS, run in release mode: flutter run --release. This removes the debug banner and gives you production-level rendering performance.
• Enable GPU acceleration in AVD settings so animations play back at full frame rate during recording.

Recording on a Real Device via USB

Simulator and emulator footage is convenient, but nothing beats a recording from actual hardware. Real-device recordings eliminate emulator-specific rendering quirks and demonstrate true production performance, which is especially valuable if your Flutter app uses platform channels or hardware-dependent features like the camera or GPS.

SmoothCapture supports USB capture from connected iPhones and iPads. Connect your device to your Mac, and SmoothCapture will recognize it as a recording source alongside your Simulator windows and displays. You get a direct, low-latency mirror of the device screen at its native resolution.

The workflow is straightforward:

1. Connect your iPhone or iPad to your Mac via a Lightning or USB-C cable.
2. Open SmoothCapture and select the connected device from the source picker.
3. Launch your Flutter app on the device (using flutter run or directly from the installed build).
4. Hit record in SmoothCapture, walk through your app's key flows, then stop.
5. Apply a matching device frame and export.

For Android real-device recording, you can use scrcpy to mirror the device screen to a macOS window, then capture that window with SmoothCapture. This gives you the same high-quality output with full frame-application support.

Adding 3D Device Frames

A raw screen recording looks flat. Wrapping it in a realistic device frame instantly communicates "this is a real app running on a real phone," which builds trust and looks far more professional in marketing material.

SmoothCapture's 3D device frame library includes the latest iPhone, iPad, Pixel, and Galaxy models. After you finish recording, select a frame from the sidebar. Your video is automatically mapped onto the device screen with correct perspective, reflections, and shadows. No manual alignment required.

For Flutter developers working cross-platform, the typical workflow looks like this:

1. Record the iOS version of your app (Simulator or real device).
2. Apply an iPhone 15 Pro or iPhone 16 Pro frame.
3. Export the iOS clip.
4. Record the Android version of your app (Emulator or real device).
5. Apply a Pixel 9 or Galaxy S24 frame.
6. Export the Android clip.

You now have two platform-specific demo videos from a single codebase. Use them individually for each store listing, or combine them in a side-by-side composite to highlight Flutter's cross-platform consistency.

Editing Tips for Flutter Demos

A great demo video is not just a screen recording with a frame slapped on top. Thoughtful editing makes the difference between a video that gets skipped and one that drives downloads. Here are techniques that work especially well for Flutter apps.

Show both platforms

Flutter's cross-platform story is a selling point. Consider opening with one platform and cutting to the other mid-video, or using a split-screen layout. This subtly communicates that users get a consistent experience regardless of their device.

Highlight hot reload in dev content

If your demo targets other developers (e.g., for an open-source package or a developer tool built with Flutter), include a hot reload moment. Show a code change, save, and watch the UI update instantly. It is one of Flutter's most compelling features, and it looks impressive on video.

Keep it snappy

Aim for 15 to 30 seconds for an App Store preview or social media clip. For a longer product walkthrough, 60 to 90 seconds is the sweet spot. Cut aggressively: remove every loading spinner, every pause where nothing happens, every redundant tap. Speed up slow transitions to 1.5x or 2x if needed.

Focus on one flow per clip

Rather than cramming every feature into a single video, create short clips around individual user journeys: onboarding, the core action loop, a key integration. You can use different clips for different store listing slots and repurpose them individually on social media.

Use smooth, deliberate gestures

When recording, interact with the app slowly and intentionally. Rushed taps and fast swipes are hard to follow on video. If you are recording from a Simulator or Emulator, use trackpad gestures at a measured pace. SmoothCapture's cursor effects can further highlight where interactions happen.

Exporting for App Store & Play Store

Each store has specific video requirements. Getting these wrong means your upload will be rejected, so it is worth double-checking before you export. For a deep dive, see our complete App Store preview video guide.

Apple App Store requirements

• Format: H.264 or HEVC in an MOV or MP4 container.
• Duration: 15 to 30 seconds.
• Resolution: Must match the target device exactly. For the 6.7-inch display (iPhone 15 Pro Max): 1290 x 2796 pixels. For the 6.1-inch display (iPhone 15 Pro): 1179 x 2556 pixels.
• Frame rate: 30 fps.
• Audio: Optional, but if included must be stereo AAC.

SmoothCapture can export directly at these resolutions. When you select an iPhone frame and export, the output file matches Apple's expected dimensions, so you can upload to App Store Connect without any additional transcoding.

Google Play Store requirements

• Format: YouTube-hosted video linked from the Play Console, or a direct upload in MP4/WebM.
• Aspect ratio: 16:9 landscape or 9:16 portrait. Portrait is recommended for phone app listings.
• Duration: 30 seconds to 2 minutes.
• Resolution: 1080p minimum recommended. For portrait phone demos, 1080 x 1920 pixels works well.

Google is more flexible than Apple on exact pixel dimensions, but using a standard resolution ensures the video displays crisply across all device screens in the Play Store.

Social media exports

For Twitter/X, aim for a square (1080 x 1080) or vertical (1080 x 1350) format under 60 seconds. For Product Hunt and landing pages, a looping GIF or auto-playing MP4 in 16:9 works best. SmoothCapture supports multiple export presets, so you can generate all of these from the same source recording.

Wrapping up

Flutter gives you the power to build beautiful apps for every platform from a single codebase. A professional demo video is the best way to communicate that quality to potential users, reviewers, and stakeholders. The workflow is simple: record your app on Simulator, Emulator, or a real device; wrap it in a matching 3D device frame; edit for clarity and brevity; and export to the right specs.

For more on the broader mobile demo workflow, see our mobile developer's guide to app demo videos. And if you are ready to start recording, SmoothCapture handles the entire pipeline from capture to framed export in a single Mac-native app.