Flutter App Store Screenshots: Capture, Automate and Design

Quick answer: Run your Flutter app on an iOS simulator and an Android emulator with the debug banner hidden, then capture each screen with xcrun simctl io booted screenshot or adb exec-out screencap -p > screen.png. To automate it, call binding.takeScreenshot() in an integration_test and save the bytes in the driver's onScreenshot callback. Then place the captures in a store layout and export every size.

Flutter makes it easy to render the same UI everywhere, which also makes it easy to ship screenshots full of debug leftovers. Fix these before you capture anything.

Hide the debug banner. Simulators and emulators only run Flutter in debug mode (profile and release modes aren't supported there), so the red DEBUG ribbon appears in the corner. Set debugShowCheckedModeBanner: false on your MaterialApp, CupertinoApp or WidgetsApp.

Add a screenshot mode. Pass a flag at build time with --dart-define=SCREENSHOT_MODE=true and read it with const bool.fromEnvironment('SCREENSHOT_MODE'). Use it to skip onboarding, sign in to a demo account and load realistic, fictional data, so every run shows the same content.

Respect each platform. If your app adapts to iOS and Android (Cupertino controls, platform fonts, back gestures), capture iOS screens on iOS and Android screens on Android. A Material-only UI is fine, but an Android-looking date picker in your App Store set looks out of place.

Clean the status bar. Use xcrun simctl status_bar booted override on iOS and Android's demo mode; our clean status bar guide has the exact commands.

Watch for overflow stripes. In debug mode, a RenderFlex overflow paints yellow and black stripes. Long translations trigger them, so check every language.

For a first release with one language, manual capture is quick:

1. List devices with flutter devices and start the app on one with flutter run -d <device-id> --dart-define=SCREENSHOT_MODE=true.
2. Navigate to each screen.
3. Capture with xcrun simctl io booted screenshot 01-home.png on iOS or adb exec-out screencap -p > 01-home.png on Android. The flutter screenshot command can also capture a connected device.
4. Repeat on each simulator size you need.

Pick simulators by output resolution: the required iPhone 6.3″ slot takes 1206 × 2622 or 1179 × 2556, and iPad apps need the 13″ size. Our Xcode simulator screenshot guide maps simulators to App Store slots.

When you need several devices and languages, let a test drive the app. The integration_test package ships with the Flutter SDK and can take screenshots on Android, iOS and the web.

1. Add integration_test and flutter_test to dev_dependencies, both with sdk: flutter.
2. In integration_test/screenshot_test.dart, get the binding with final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized();.
3. Start your app inside a testWidgets test, then wait for animations with await tester.pumpAndSettle();.
4. On Android only, call await binding.convertFlutterSurfaceToImage(); once before the first screenshot.
5. Capture each screen with await binding.takeScreenshot('01-home');, navigating with tester.tap() between captures.
6. In test_driver/integration_test.dart, import package:integration_test/integration_test_driver_extended.dart and call integrationDriver() with an onScreenshot callback that writes screenshotBytes to a PNG named after screenshotName and returns true.
7. Run it: flutter drive --driver=test_driver/integration_test.dart --target=integration_test/screenshot_test.dart -d <device-id>.

Loop step 7 over each simulator and locale in a shell script, passing --dart-define values for language or demo data. Check the first batch carefully before scaling up: confirm the pixel size, the status bar and that fonts and images finished loading.

Golden tests render widgets headlessly with matchesGoldenFile and save reference images when you run flutter test --update-goldens. They're fast and deterministic, but they make poor store screenshots on their own:

• By default, widget tests render text in a placeholder test font that draws blocks instead of letters. You have to load your real fonts in the test setup to get readable text.
• There's no system UI: no status bar, no keyboard, no platform chrome.
• Plugins that talk to native code usually need mocking, so the screen may not match what users see.

Use goldens to catch visual regressions, and use real captures for the store. Apple's guideline 2.3.3 expects screenshots that show the app in use.

fastlane is common in Flutter projects for shipping builds: the Flutter docs' continuous delivery guide sets it up inside the ios and android folders. Its deliver and supply actions can also upload screenshots to App Store Connect and Google Play. fastlane's own screenshot tools drive native UI tests (XCUITest and Espresso), which can work with Flutter but take more setup than integration_test, since your screens are Flutter widgets rather than native views. See our fastlane snapshot and fastlane screengrab guides if you want to go that way.

Raw captures show your UI, but store screenshots usually add a headline, a branded background and sometimes a device frame. Because Flutter apps look nearly identical on both platforms, one design can serve both stores, as long as each export meets that store's rules:

Most Android phone captures are taller than 2:1, so place them inside a 9:16 layout instead of uploading them raw. The full size lists live in our App Store size guide and Google Play size guide.

• The DEBUG ribbon in the corner of every capture. Set debugShowCheckedModeBanner: false.
• Blank Android screenshots from integration_test. Call convertFlutterSurfaceToImage() first.
• Half-finished animations. Use pumpAndSettle(), or a fixed pump duration for screens with endless animations.
• Images still loading. Precache network images or use bundled demo assets in screenshot mode.
• Placeholder fonts in golden images. Load real fonts or capture on a simulator.
• Stale UI. Re-capture whenever a redesign ships; screenshots must match the version you submit.

Building with React Native instead? Our Expo screenshot guide covers the same workflow there.