A Fresh Take on Creating App Store Screenshots in Flutter
As Flutter developers, we love the efficiency of writing code once and deploying it everywhere. But when it comes to the very final step of launching or updating an app, generating App Store and Play Store screenshots, that efficiency suddenly feels miles away.
If you have ever spent hours taking manual screenshots, wrestling with complex UI test setups, or trying to configure Fastlane for multiple device sizes and localizations, you know it can be a tedious process.
Over the weekend, I released a new package called flutter_store_screenshots to make this workflow smooth, visual, and highly efficient.
But wait, aren't there already dozens of screenshot tools out there? Yes, there are. But this package takes a fundamentally different approach. Here is why it completely changes the game.
The Problem with Existing Workflows
Most existing screenshot tools fall into one of two categories, and both come with specific challenges:
The Beautiful Wrappers: Tools that put your screenshots inside a nice device frame with a gradient background and a catchy title. They look great, but you still have to provide the raw screenshots yourself. If you change a button color or a layout feature in your app, you have to retake all those base images manually.
The Automation Monsters: Solutions that integrate with UI tests (like integration tests or Fastlane framing). While powerful, setting up UI tests just to snap pictures is incredibly complex. You have to maintain test scripts, handle mock data or asynchronous loading, and run them across countless device simulators and localized environments.
Neither of these solutions leverages the true power of what we already do best: building UIs with Flutter.
The Solution: Screenshots as Widgets
flutter_store_screenshots takes a completely different route. It doesn't ask you to manually take photos, and it doesn't force you into complex automated testing.
Instead, it treats your screenshots exactly like the rest of your app: as Flutter Widgets.
The core idea is elegant: You create a tiny companion project (a Flutter desktop app, optimized for macOS) right next to your main mobile application. This project takes a dependency on both your actual app and the flutter_store_screenshots package.
Because you have direct access to your app's codebase, you can import and render your real app UI directly inside the screenshot builder.
Instead of writing test scripts to navigate to a specific page, you just instantiate the Widget directly:
StoreScreenshot(
name: 'home_screen',
builder: (context) => const HomeScreen(),
),
Absolute Flexibility and Control Since you are writing standard Flutter code, you have ultimate control over how the screenshots look. The package automatically handles the heavy lifting of simulating different operating systems, screen sizes, and localizations. It passes this environment data down via the BuildContext.
Want a plain, full-screen snapshot of your UI? Done. Want a highly customized, branded store asset with a custom font, background gradients, device frames, and translated marketing text? Just build it with Widgets!
StoreScreenshot(
name: 'home_fancy',
builder: (context) => MyFancyStoreFrame(
title: mapLocalizationToText(context),
device: Devices.ios.iPhone15ProMax,
child: const HomeScreen(),
),
),
If you know how to build a layout in Flutter, you already know how to design your perfect App Store assets. No external design tools, no complex configurations.
The Real Superpower: Instant Updates
The biggest drain on a developer's time isn't creating the first set of screenshots, it's updating them when the app evolves.
When you change a feature, tweak your branding, or update a page design, traditional workflows require you to redo everything from scratch. With this package, your screenshots are inherently tied to your live production UI.
If you update the HomeScreen in your main app, your screenshot project automatically reflects those changes. You simply run your desktop screenshot app, preview how the screens look across all configurations in real-time, and hit Export. With a single click, a fresh batch of perfect store assets is generated and saved directly to your disk.
A Faster Way to Ship
Generating store assets shouldn't be a bottleneck in your release cycle. By leveraging the power of Flutter’s own rendering engine and desktop capabilities, you can turn screenshot generation into a seamless, visual, and highly maintainable part of your development process.
Ready to streamline how you ship your apps?
👉 Check out flutter_store_screenshots on pub.dev to see the full documentation, or dive straight into the GitHub example project to get started.
