让 Flutter 像原生 Android 一样引用资源

分享一个我自己开发的 Idea 系 IDE 插件。

插件地址

欢迎安装体验和提 Issues，给个 star 也是极好的😊。

• AssetsRefGenerator.jar
• GitHub 地址: ChinaStyle812/AssetsRefGenerator
• 也已经提交到了 Idea 插件仓库，可以到 File ->Settings -> Plugins 中搜索下载。

如果直接下载 .jar 文件安装，安装方式为：
File ->Settings -> Plugins -> ⚙(齿轮图标) -> Install Plugin from Disk…

背景

作为一名 Android 开发者，已经非常习惯于 R.drawable.xxx 的资源引用方式。学习了 Flutter 后，觉得 Flutter 中图片等资源的使用方式，和 Android 相比，简直太不友好、太返古了：

1. 首先，要在 pubspec.yaml 中手动添加资源声明，像这样的：

  assets:
    - images/arrow_right.png
    # other assets...

2. 然后，使用的时候还要手动写字符串的引用路径，像这样：

// ...
Container(
  margin: EdgeInsets.only(right: 15),
  child: Image.asset("images/arrow_right.png"),
),
// ...

需要手动编写的东西多，不便于开发编码，还容易出错。于是萌生了一个想法，如果在 Flutter 中，也能像在 Android 中使用 R.drawable.xxx 一样引用资源，那开发起来就愉快多了😁。

于是就有了这个插件——Flutter Assets Ref Generator。

功能

• 自动生成 pubspec.yaml 中的资源声明，能识别资源变体（如2.0x、3.0x多分辨率），不会重复；
• 自动生成一个包含资源文件字符串定义的 res.dart 文件。

安装插件后，只需要点击一下 IDE ToolBar 中的

按钮，就可以像 Android 中生成 R 资源引用一样，自动生成对应内容了，一图胜千言：

有了这个插件，使用资源就是这样的：

插件优点

• 减少添加完资源文件后，还要手动修改 pubspec.yaml 这种琐碎的重复劳动；
• 写代码引用资源更加方便，不需要手动复制粘贴或手动输入资源引用路径；
• 减少了手动输入内容，也就降低了出错概率（因为资源名称中一两个字母的差错而排查半天问题的体验，让人很抓狂🤬）。