https://github.com/defuncart/app_store_screenshots
A flutter tool to generate screenshots and other assets for app stores.
https://github.com/defuncart/app_store_screenshots
Last synced: 2 months ago
JSON representation
A flutter tool to generate screenshots and other assets for app stores.
- Host: GitHub
- URL: https://github.com/defuncart/app_store_screenshots
- Owner: defuncart
- License: mit
- Created: 2023-12-10T18:02:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-12T12:04:32.000Z (5 months ago)
- Last Synced: 2025-03-22T15:23:02.624Z (3 months ago)
- Language: Dart
- Homepage:
- Size: 1.4 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# app_store_screenshots
A flutter tool to generate screenshots and other assets for app stores.
## About
*app_store_screenshots* utilizes goldens, a Flutter testing tool, to generate assets:
```sh
flutter test --update-goldens --tags app_store_screenshots
```
To ensure that these tests do not interfere with your testing pipeline, exclude the tag `app_store_screenshots`:
```sh
flutter test --exclude-tags app_store_screenshots
```
## Getting Started
Add dependency:
```yaml
dev_dependency:
app_store_screenshots:
git: https://github.com/defuncart/app_store_screenshots
```
### Screenshots
`generateAppStoreScreenshots` can be used to generate screenshots for a given `ScreenshotsConfig` and `List`.
```dart
final config = ScreenshotsConfig(
devices: [DeviceType.androidPhonePortrait, DeviceType.iOSPhone67Portrait],
locales: AppLocalizations.supportedLocales,
localizationsDelegates: AppLocalizations.localizationsDelegates,
background: ScreenshotBackground.solid(
color: Colors.green,
),
foregroundOptions: const ScreenshotForegroundOptions.top(
textStyle: textStyle,
),
theme: ThemeData.light(),
);
```
```dart
final screens = [
ScreenshotScenario(
onBuildScreen: () => const Page1(),
onGenerateText: (locale) => switch (locale) {
const Locale('en') => 'Light mode',
const Locale('de') => 'Hellmodus',
_ => throw ScreenshotUnsupportedLocale(locale),
},
),
];
```
```dart
void main() {
generateAppStoreScreenshots(
config: config,
screens: screens,
);
}
```
Screenshots can be found in [example/assets_dev/screenshots/](example/assets_dev/screenshots/).
See [example/test/app_store_screenshots/generate_screenshots_test.dart](example/test/app_store_screenshots/generate_screenshots_test.dart) for full example.
#### Supported Devices
| DeviceType | Description | Resolution | Frame |
| ------------------------ | ------------------ | ---------- | --------------- |
| androidPhonePortrait | Android Phone | 1080x1920 | One Plus 8 Pro |
| androidPhoneLandscape | Android Phone | 1920x1080 | One Plus 8 Pro |
| androidTablet7Portrait | Android 7" Tablet | 1080x1920 | Generic |
| androidTablet7Landscape | Android 7" Tablet | 1920x1080 | Generic |
| androidTablet10Portrait | Android 10" Tablet | 1080x1920 | Generic |
| androidTablet10Landscape | Android 10" Tablet | 1920x1080 | Generic |
| iOSPhone47Portrait | 4.7" iPhone | 750x1334 | iPhone SE |
| iOSPhone47Landscape | 4.7" iPhone | 750x1334 | iPhone SE |
| iOSPhone55Portrait | 5.5" iPhone | 1242x2208 | iPhone 13 mini¹ |
| iOSPhone55Landscape | 5.5" iPhone | 2208x1242 | iPhone 13 mini¹ |
| iOSPhone65Portrait | 6.5" iPhone | 1242x2688 | iPhone 13 mini |
| iOSPhone65Landscape | 6.5" iPhone | 2688x1242 | iPhone 13 mini |
| iOSPhone67Portrait | 6.7" iPhone | 1290x2796 | iPhone 13 mini¹ |
| iOSPhone67Landscape | 6.7" iPhone | 2796x1290 | iPhone 13 mini¹ |
| iOSTablet129Portrait | 12.9" iPad | 2048x2732 | iPad 4th Gen |
| iOSTablet129Landscape | 12.9" iPad | 2732x2048 | iPad 4th Gen |
| linux | | 1920x1080 | Laptop |
| macOS | | 1920x1080 | Laptop |
| windows | | 1920x1080 | Laptop |
¹Incorrect frame but correct resolution
### App Icon
Given an `AppIcon` widget, `generateAppIcon` and `generateAppIconAndroidForeground` can be used to generated 512x512 app icons and android foreground, while `generateAppIconMacOS` can be used to generate a 824x macOS app icon in a 1024x frame with rounded edges and shadows:
```dart
generateAppIcon(
onBuildIcon: (size) => AppIcon(
size: size,
),
);
```
```dart
generateAppIconAndroidForeground(
onBuildIcon: (size) => AppIcon(
size: size,
hasTransparentBackground: true,
),
);
```
```dart
generateAppIconMacOS(
onBuildIcon: (size) => AppIcon(
size: size,
),
);
```
Icons can be found in [example/assets_dev/app_icons/](example/assets_dev/app_icons/). [flutter_launcher_icons](https://pub.dev/packages/flutter_launcher_icons) could then be used to update the launcher icons for targeted platforms.
See [example/test/app_store_screenshots/generate_app_icons_test.dart](example/test/app_store_screenshots/generate_app_icons_test.dart) for full example.
### Google Play Assets
`generateGooglePlayFeatureGraphic` can be used to generate a 1024x500 feature graphic per locale for Google Play.
Assets can be found in [example/assets_dev/google_play_assets/](example/assets_dev/google_play_assets/).
See [example/test/app_store_screenshots/generate_google_play_assets_test.dart](example/test/app_store_screenshots/generate_google_play_assets_test.dart) for full example.
### Steam Assets
Icon, Cover and Background assets for programs in Steam Launcher can be generated as follows:
```dart
generateSteamLogo(
onBuildIcon: (size) => const SteamIcon(),
);
```
```dart
generateSteamCover(
onBuildCover: (size) => const SteamCover(),
);
```
```dart
generateSteamLogo(
onBuildLogo: (size) => const SteamLogo(),
);
```
```dart
generateSteamBackground(
onBuildBackground: (size) => const SteamBackground(),
);
```
Assets can be found in [example/assets_dev/steam/](example/assets_dev/steam/).
See [example/test/app_store_screenshots/generate_steam_assets_test.dart](example/test/app_store_screenshots/generate_steam_assets_test.dart) for full example.
## Custom Fonts
By default, all fonts included in pubspec.yaml, as well as dependent packages, will be loaded. However, if another font is required, for instance to render an app icon, it can be loaded as follows:
```dart
setUp(() async {
await loadFont(
path: 'path/to/font',
name: 'FontFamily',
);
});
```
and then used via `fontFamily` as required.
## Roadmap
- 0.0.1 release on pub.dev
- Add testing