Features

  • Generate a project structure to start a new project.
  • Add page to the project. (Flutter Bloc Pattern)
  • Generate ready to use screenshots for the project with the right sizes for the stores.

Getting started

Install the package by running the following command:

dart pub global activate projenerator

or

dart pub global activate --source path <path to this package>

Usage

Generate a project structure

To generate a new flutter project, run the following command:

projenerator create <projectName>

The project will be created in the current directory and have the following structure:

project
├── all default flutter files
├── l10n.yaml
├── analysis_options.yaml
├── projenerator_screenshots_config.yaml
└── lib
    ├── l10n
    │   ├── app_en.arb
    │   └── gen
    │       ├── app_localizations.dart
    │       └── app_localizations_en.dart
    ├── src
    │   ├── navigation
    │   ├── repositories
    │   │   └── models
    │   ├── services
    │   ├── ui
    │   │   └── pages
    │   ├── utils
    │   └── app.dart   
    └── main.dart

Add a page to the project

To add a page to the project, run the following command:

projenerator add-page <page_name>

The page is going to be added to the lib/src/ui/pages folder.

The page has the following structure:

example
├── bloc
│   ├── example_bloc.dart
│   ├── example_bloc_event.dart
│   └── example_bloc_state.dart
└── view
    ├── example_view.dart
    ├── example_view_failure.dart
    ├── example_view_initial.dart
    ├── example_view_loaded.dart
    └── example_view_loading.dart

Generate stores screenshots (iOS, Android, macOS, tablet)

projenerator can automatically frame, label, and export your app’s screenshots for multiple platforms and languages in one go. The generated screenshots will be Store Ready which means they will have the correct sizes for the stores (AppStore and Google Play Store). Follow these steps:

  1. Prepare your raw screenshots

    • Create a top-level folder (e.g. screenshots/) in your project.

    • Inside it, add one subfolder per platform you target:

      screenshots/
├── android/
├── ios/
├── macos/
└── tablet/

    • Within each platform folder, add one subfolder per language code you support (matching those in your YAML):

      screenshots/
├── android/
│   ├── en/
│   ├── fr/
│   └── de/
├── ios/
│   ├── en/
│   ├── fr/
│   └── de/
└── …

    • Drop your un-framed, full-resolution screenshots into the appropriate language folder.

      • Filenames (without extension) will be used as keys to look up localized text in your config.
      • If you only have screenshots in one language (e.g. English), you can point all your language codes to that same folder in the YAML—you're not forced to supply a separate screenshot per language.

  2. Create or update your YAML configuration

    • If you ran projenerator create …, a default projenerator_screenshots_config.yaml may already exist.

    • Use the template below to define:

      • Global settings (font, background, padding, output folder).
      • Languages (which codes to process, plus a fallback).
      • Per-platform overrides (custom frames, screenshot paths, background and text styling).
      • Image-specific labels (map each filename to its localized caption, if not caption is declared, image won't have text.).

    • Folder structure is just a recommendation—you can organize your screenshots however you like. In your projenerator_screenshots_config.yaml, you explicitly declare each screenshots_dir path, so the tool will read from whatever directories you specify.

  3. Run the screenshot generator

    projenerator generate-screenshots [-c <config_file>]

    • By default, it looks for projenerator_screenshots_config.yaml in your project root.

    • Use -c to point at an alternate config path.

    • The tool will:

      1. Read each raw screenshot.
      2. Resize & downsample (with smart filtering or multi-pass) to fit the frame window.
      3. Composite your app image inside a device frame (iOS, Android, macOS, Tablet).
      4. Draw auto-wrapped, centered captions above each frame, in the correct language, color, and size.
      5. Export PNGs into build/screenshots/<platform>/<lang>/, or your custom output folder.

  4. Inspect your results

    • Find your framed, labeled screenshots under your configured output_folder (e.g. build/screenshots/ios/en/home.png).
    • Update colors, padding, or captions by tweaking the YAML and re-running the command.

Example folder structure

my_app/
├── lib/
├── screenshots/
│   ├── android/
│   │   ├── en/
│   │   │   └── home.png
│   │   └── fr/
│   │       └── home.png
│   ├── ios/
│   │   └── en/
│   │       └── home.png
│   └── macos/
│       └── en/
│           └── home.png
└── screenshots.yaml

Tip: If you only maintain en/ screenshots but want to generate for fr and de as well, simply set their screenshots_dir to the same en/ path in your YAML.

Template

# ┌────────────────────────────────────────────────────────────────────────────┐
# │                            Screenshots Config                             │
# │                                                                            │
# │ This template drives how screenshots are framed, colored, and labeled.    │
# └────────────────────────────────────────────────────────────────────────────┘

global:
  # Path to your app’s font file. Can be a ZIP of bitmap glyphs or a TrueType/OTF.
  # This hasn't been tested and it is recommended not to use this to use the default font.
  font: "path/to/your/custom_font.zip"

  # Background fill for the entire canvas:
  background:
    default:
      # “gradient” if not gradient, just add a color: #RRGGBB attribute
      type: gradient

      # Start/end colors for gradients (hex format, RRGGBB or AARRGGBB).
      start_color: "#FF0000"
      end_color:   "#0000FF"

      # Gradient direction: one of [leftToRight, topToBottom,
      # topLeftToBottomRight, bottomLeftToTopRight]. Defaults to leftToRight.
      direction: leftToRight

  # Padding (in pixels) around the screenshot inside the frame,
  # before drawing text or borders.
  # It is recommended not to use this and let the default padding be used.
  padding: 40

  # Default text settings by language. You can override per-language here.
  text:
    default:
      # Hex color for your overlay text.
      text_color: "#FFFFFF"
      # Font size (points or pixels—match your font design).
      # Common presets: [56, 72, 80, 100, 120, 150]
      font_size: 120

    # French-specific overrides:
    fr:
      text_color: "#FFFFFF"
      font_size: 56

    # English-specific overrides:
    en:
      text_color: "#FF00FF"

  # Default texts for all platforms
  texts:
    img_1:
      en: ""
      fr: ""
  # Where to write all generated renders:
  output_folder: "build/screenshots"

# ────────────────────────────────────────────────────────────────────────────────

# Languages your tool will generate for. “supported” is the full set;
# “fallback” is used when a translation is missing.
languages:
  supported: ["en", "fr", "de"]
  fallback:  "en"

# ────────────────────────────────────────────────────────────────────────────────

# Platform-specific settings. For each key (ios, android, macos, tablet):
# - screenshots_dir: where to read raw screenshots per language
# - frame: optional custom device frame image path
# - background: override global background
# - texts: per-image labels, by language

platforms:

  ios:
    # Screenshots location: use `default` or per-lang subfolders
    screenshots_dir:
      default: "screenshots/ios"
      fr:      "screenshots/ios/fr"

    # You can override the global background here:
    background:
      default:
        type: gradient
        start_color: "#FF0000"
        end_color:   "#0000FF"
        direction:   topLeftToBottomRight
      fr:
        # A simple solid fill for French screenshots
        color: "#FFEEEE"

    # If you want a custom text setting per platform, you can do it here:
    text:
      default:
        text_color: "#000000"
        font_size: 100
      fr:
        text_color: "#00FF00"
        font_size:  80

    # Text labels for each image (keyed by file basename):
    texts:
      img_1:
        en: "Welcome!"
        fr: "Bienvenue!"
        de: "Willkommen!"
      img_2:
        en: "Manage your profile"
        fr: "Gérez votre profil"

  android:
    # If you have a custom frame asset, point to it here:
    frame: "path/to/your/custom/frame.png"

    screenshots_dir:
      default: "screenshots/android"
      en:      "screenshots/android/en"
      fr:      "screenshots/android/fr"

    background:
      default:
        # Solid color instead of gradient:
        color: "#AAFFAA"

    texts:
      img_1:
        en: "Welcome on Android!"
        de: "Willkommen!"
      img_2:
        en: "Adjust Settings"
        fr: "Réglez les paramètres"

  macos:
    screenshots_dir:
      default: "screenshots/macos"
      fr:      "screenshots/macos/fr"

    background:
      default:
        type: gradient
        start_color: "#334455"
        end_color:   "#556677"
      en:
        # Override only the solid color for English:
        color: "#FFFFFF"

    texts:
      img_1:
        en: "Welcome to macOS!"
        fr: "Bienvenue sur macOS!"

  tablet:
    screenshots_dir:
      default: "screenshots/tablet"
      fr:      "screenshots/tablet/fr"

    # No custom background ⇒ uses global.background
    texts:
      img_1:
        en: "Welcome on Tablet!"
        fr: "Bienvenue sur tablette!"

Libraries