Flutter Generate Assets

English | 中文

A VSCode extension that generates Dart asset constants from your Flutter project's pubspec.yaml.

Also available as a Dart CLI tool: generate_assets — provides the same functionality via dart run generate_assets without VSCode.

Features

• Manual trigger — run from the command palette, status bar, or context menu
• File watching — optionally regenerates when assets change (disabled by default)
• Image hover preview — hover over any asset constant to see a thumbnail (optional)
• Smart naming — converts file paths to camelCase including directory segments; automatically appends file extension to disambiguate same-named files in different formats (e.g. copyToClipboardPng / copyToClipboardSvg)
• Format-safe — generated file includes // dart format off to prevent formatter interference
• Resolution-aware — ignores 2x, 3x, 1.5x resolution variant directories automatically
• Unused asset detection — scans lib/ Dart files and highlights unused constants with warnings
• Batch delete — one-click removal of unused assets including all resolution variants

Commands

All commands are available via Cmd+Shift+P, the pubspec.yaml right-click context menu, and the editor title bar.

Usage

Generate constants

• Cmd+Shift+P → Flutter: Generate Assets
• Right-click pubspec.yaml in the Explorer → Flutter: Generate Assets
• Open pubspec.yaml and click the ⟳ icon in the editor title bar
• Click the ⟳ Assets button in the status bar

Find and delete unused assets

1. Cmd+Shift+P → Flutter: Find Unused Assets
   • Unused constants are marked with yellow warning squiggles in the generated file
   • The Output Channel lists all unused paths
2. Cmd+Shift+P → Flutter: Delete Unused Assets
   • A confirmation dialog shows every file that will be deleted (including 2x, 3x variants)
   • After deletion, the constants file is regenerated automatically

Note: Assets referenced via string interpolation (e.g. 'assets/$name.png') cannot be statically detected and may be reported as unused.

Configuration

Add a flutter_generate_assets section to the root of your pubspec.yaml:

flutter_generate_assets:
  output: lib/common/assets.dart   # default: lib/generated/assets.dart
  class_name: Assets               # default: Assets
  strip_prefix: assets/            # default: assets/ — strip this prefix before naming

flutter:
  assets:
    - assets/images/
    - assets/icons/

strip_prefix

Controls which path prefix is removed before generating camelCase variable names.

# Single prefix (string)
flutter_generate_assets:
  strip_prefix: assets/

# Multiple prefixes (list) — first match wins
flutter_generate_assets:
  strip_prefix:
    - assets/
    - images/

Example: with strip_prefix: assets/, the path assets/images/logo.png becomes imagesLogo instead of assetsImagesLogo.

VSCode settings:

Generated Output

Given the configuration above, the extension generates lib/common/assets.dart:

// GENERATED CODE — DO NOT MODIFY BY HAND
// ─────────────────────────────────────────────────────────────
//  Flutter Generate Assets
//  VSCode  https://github.com/ceeyang/flutter_generate_assets
//  CLI     https://github.com/ceeyang/generate_assets
// ─────────────────────────────────────────────────────────────
// ignore_for_file: lines_longer_than_80_chars, constant_identifier_names
// dart format off

class Assets {
  static const String imagesLogo = 'assets/images/logo.png';
  static const String imagesBgHome = 'assets/images/bg_home.jpg';
  static const String iconsArrowLeft = 'assets/icons/arrow-left.svg';
}

When two files share the same name but have different extensions, the extension is automatically appended to distinguish them:

// assets/copy_to_clipboard.png + assets/copy_to_clipboard.svg →
static const String copyToClipboardPng = 'assets/copy_to_clipboard.png';
static const String copyToClipboardSvg = 'assets/copy_to_clipboard.svg';

Requirements

• VSCode 1.85.0 or later
• A Flutter project with pubspec.yaml at the workspace root

License

MIT