项目中对资源的使用是开发过程中再常见不过的一环。 一般我们在将资源导入到项目中后，会通过资源名称来访问。 但在很多情况下由于我们疏忽输入错了资源名称，从而导致资源无法访问。 所以，急需解决两个问题：

• 资源编译期可检查
• 可方便预览资源

安装相关插件

在vscode中安装两个插件， 如下 ：

● Flutter Assets Gen 插件： 负责资源生成

● Image preview 插件 ： 负责资源图片预览

使用后的效果如下：

配置

插件安装完成后， 在pub.yaml中配置 。可放到文件最后， 最左对齐

flutter_assets:assets_path: assets/images/output_path: lib/filename: r.dartclassname: R

接着执行如下操作：

vscode 上点击 ‘查看’ 下的 “命令面板” . 输入 Flutter Assets: Generate

如果配置都正确， 这时会在指定目录下生成 r.dart文件 。
类似如下 :

// ignore_for_file: prefer_single_quotes
class R {R._();/// Assets for assetsImagesIcLauncher/// assets/images/ic_launcher.pngstatic const String assetsImagesIcLauncher = "assets/images/ic_launcher.png";/// Assets for assetsImagesIconBack/// assets/images/icon_back.pngstatic const String assetsImagesIconBack = "assets/images/icon_back.png";/// Assets for assetsImagesIconCommunityGrey/// assets/images/icon_community_grey.pngstatic const String assetsImagesIconCommunityGrey = "assets/images/icon_community_grey.png";/// Assets for assetsImagesIconCommunitySelected/// assets/images/icon_community_selected.pngstatic const String assetsImagesIconCommunitySelected = "assets/images/icon_community_selected.png";/// Assets for assetsImagesIconHomeGrey/// assets/images/icon_home_grey.pngstatic const String assetsImagesIconHomeGrey = "assets/images/icon_home_grey.png";
}

r.dart 文件将资源都声明为了全局常量，对比直接录入字符串的方式，减少了因录入不对而导致的加载失败问题。

使用

需要先导入 r.dart文件

import 'package:getx_demo/r.dart';

• 显示本地图片 ：

Image.asset(R.assetsImagesIconBack);