Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>flutter_assets_xNew to Visual Studio Code? Get it now.
flutter_assets_x

flutter_assets_x

lpoint

|
390 installs
| (0) | Free
自动生成资源文件的dart代码
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

说明

原插件是flutter_assets,作者icofans,

本插件修改了工作区目录获取的方式,和其他的一些细微修改,添加了一些控制参数

flutter_assets 的相关配置请不要配置在pubspce.yaml文件尾部

基于auto_assets插件修改,修改了配置方式, pubspec自动添加声明等...

1、在项目pubspec.yaml下添加(若不添加将使用如下默认配置):

flutter_assets:
  assets_path: assets/images
  output_path: lib/generated/assets
  package: module_home
  enable_file_extension: []
  compress_images: false
  • assets_path 代表项目中资源文件的目录,有多个的时候可以传入数组。
  • output_path 代表自动生成的代码的根目录。
  • package 指定模块,会生成模块相应的声明代码。
  • compress_images 指定需不需要压缩图片。
  • enable_file_extension 支持自动写入pubspec的文件后缀

2、在 VSCode -> Extensions 下搜索 flutter_assets_x 并安装, 重新打开项目

3、如资源目录如下:

|-- assets
    |-- images
    |   |-- tab
    |   |   |-- 2x
    |   |   |   |-- home.png
    |   |   |-- 3x
    |   |   |   |-- home.png
    |   |   |-- home.png
    |   |-- login
    |   |   |-- 2x
    |   |   |   |-- logo.png
    |   |   |-- 3x
    |   |   |   |-- logo.png
    |   |   |-- logo.png

生成dart文件如下:

lib/generated/assets/assets.dart

class Assets {
  Assets._();
  
  /// Assets for loginLogo
  /// login/2x/logo, login/3x/logo, login/logo
  static const String loginLogo = "assets/images/login/logo.png";

  /// Assets for tabHome
  /// tab/2x/home, tab/3x/home, tab/home
  static const String tabHome = "assets/images/tab/home.png";
}

lib/generated/assets/assets_images.dart

import 'package:flutter/widgets.dart';
import 'assets.dart';

class AssetImages {
  AssetImages._();
  
  /// Assets for loginLogo
  /// login/2x/logo, login/3x/logo, login/logo
  static AssetImage get loginLogo => const AssetImage(Assets.loginLogo);

  /// Assets for tabHome
  /// tab/2x/home, tab/3x/home, tab/home
  static AssetImage get tabHome => const AssetImage(Assets.tabHome);
}

lib/generated/assets/flutter_assets.dart

export 'assets.dart';
export 'assets_images.dart';

pubspec.yaml

...
  assets:
    - assets/images/login/
    - assets/images/tab/
...

3、设置了package时,会生成package声明的相关代码

4、新增左侧菜单, 需在模块根目录右键使用

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft