projenerator 2.0.1

A Dart CLI tool to scaffold Flutter projects, add Bloc-pattern pages, and generate framed, localized screenshots with customizable themes.

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 screenshots

Before generating the screenshots, you'll need to create a folder for the screenshots. In that folder, you can a folder named after the platform you want to generate the screenshots for (e.g. android, ios, macos or tablet). In the platform folder, you can create a folder named after the language code you want to generate the screenshots for (e.g. fr, en, de, it).

The folder structure can look like this (see below), but it's up to you to decide how you want to structure the folders. You'll need to specify the screenshot folder path in the config file.

screenshots
├── android
│   ├── fr
│   ├── en
│   └── de
├── ios
│   ├── fr
│   ├── en
│   └── de
├── macos
│   ├── fr
│   ├── en
│   └── de
└── tablet
    ├── fr
    ├── en
    └── de

Than you need to create a yaml config file, follow the template. (A default one is usually created when you create the project)

To generate screenshots for the project, run the following command and follow the instructions:

projenerator generate-screenshots [-c <config_file>]

Here is a template of the yaml config file:

# ┌────────────────────────────────────────────────────────────────────────────┐
# │                            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.
  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!"